Coder Social home page Coder Social logo

curlconverter.github.io's Issues

Release

Bump release to publish the ansible uri output

npm install errors 

➜  curlconverter.github.io git:(index-html-update) ✗ npm -v
9.7.2
➜  curlconverter.github.io git:(index-html-update) ✗ npm install
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated [email protected]: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
npm WARN deprecated [email protected]: this library is no longer supported
npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command /usr/local/Cellar/node/20.3.1_1/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users/connor/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! > [email protected] prepare
npm ERR! > husky install && npm run compile && tree-sitter build-wasm node_modules/@curlconverter/tree-sitter-bash && mv tree-sitter-bash.wasm dist/
npm ERR!
npm ERR! husky - git command not found, skipping install
npm ERR!
npm ERR! > [email protected] compile
npm ERR! > tsc
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! fatal: not a git repository (or any of the parent directories): .git
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! You must have either emcc or docker on your PATH to run this command
npm ERR! npm ERR! code 1
npm ERR! npm ERR! path /Users/connor/.npm/_cacache/tmp/git-clonew0coPs
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c husky install && npm run compile && tree-sitter build-wasm node_modules/@curlconverter/tree-sitter-bash && mv tree-sitter-bash.wasm dist/
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in: /Users/connor/.npm/_logs/2023-07-01T20_35_25_486Z-debug-0.log

npm ERR! A complete log of this run can be found in: /Users/connor/.npm/_logs/2023-07-01T20_35_01_053Z-debug-0.log

Error: Cannot find module 'yargs'

Hey,

I'm trying to run the app locally, following the steps in the readme.

npm install - finished successfully.

But the next step npm run-script build, fails with error -

user@mymachine:/curltorequests$ npm run-script build

> [email protected] build /curltorequests
> ./build.sh

Error: Cannot find module 'yargs' from '/curltorequests/node_modules/curlconverter'
    at /curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /curltorequests/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:152:21)

Thanks

Safari re-requests preloaded Wasm files

For parsing Bash, curlconverter requires 2 wasm files /tree-sitter.wasm and /tree-sitter-bash.wasm. In index.html we have the bundle of all the JavaScript code

curlconverter.github.io/index.html

Line 372 in edf28e0

<script src="/main.js"></script>

and in that code, some of the first lines it executes is

await Parser.init(); // requests /tree-sitter.wasm
const Bash = await Parser.Language.load("/tree-sitter-bash.wasm");

https://github.com/curlconverter/curlconverter/blob/e4b6fb74d508a946d1311dc63cf0ec853d9a6c1d/src/shell/webParser.ts#L7-L8

So to load the website, you

  1. get the HTML file which tells you to download the JavaScript file
  2. download the JavaScript file, start executing it and it tells you to download tree-sitter.wasm
  3. download tree-sitter.wasm execute it and then keep executing the javascript, which next tells you to download tree-sitter-bash.wasm
  4. download the tree-sitter-bash.wasm

and you've finally loaded the website. To avoid the extra round trips from having to parse and execute JavaScript to know that you need to load more Wasm files

Screenshot 2024-01-30 at 02 01 56

I added these lines to the HTML to tell it to fetch the Wasm files as soon as it parses the HTML

curlconverter.github.io/index.html

Lines 18 to 19 in edf28e0

<link rel="preload" href="/tree-sitter.wasm" type="application/wasm" as="fetch" crossorigin>
<link rel="preload" href="/tree-sitter-bash.wasm" type="application/wasm" as="fetch" crossorigin>

and this works on Chrome and Firefox

Screenshot 2024-01-30 at 02 03 19

but on Safari it loads the wasm files twice, once from the preload and once from the JavaScript

Screenshot 2024-01-30 at 02 14 56

and the console says

The resource http://localhost:8000/tree-sitter.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
The resource http://localhost:8000/tree-sitter-bash.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

I tried changing crossorigin to ="", ="anonymous" and ="use-credentials". I tried removing the type="application/wasm", removing the crossorigin= and removing both type= and crossorigin=.

One difference I see is in the Network tab under "Type" it says they're preloaded as xhr but then loaded by the JavaScript as fetch. The only difference in the sent request is the prefetch sends a Origin: http://localhost:8000 header if you have crossorigin="".

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.