mj-petite-fleur

Musical Juggling Website showing how to juggle "Petite Fleur"

Information

This project uses:

• Typescript to be able to use types in javascript.
• Vite for local production and bundling.
• pnpm as the javascript packet manager.
• Threejs as 3D javascript library.
• ESLint as a Javascript / Typescript linter.
• Prettier as a Javascript / Typescript formatter.

Local install (dev)

It is assumed you have pnpm installed on your machine. See the installation page in their documentation. The rest of the installation should also work with npm, although pnpm version locking isn't accessible to npm.

Simply fork this repository, and then use :

pnpm install

If using a too old node version (may happen on a Linux distro like Ubuntu), an error message will appear. A newer node version can be installed with :

pnpm env use --global lts

ADDITIONAL STEP : Go to node_modules/antlr4/package.json and modify the following (as found in this issue):

"exports": {
    ".": {
++    "types": "./src/antlr4/index.d.ts",
      "node": {
--      "types": "./src/antlr4/index.d.ts",
        "import": "./dist/antlr4.node.mjs",
        "require": "./dist/antlr4.node.cjs",
        "default": "./dist/antlr4.node.mjs"
      },
      "browser": {
--      "types": "./src/antlr4/index.d.ts",
        "import": "./dist/antlr4.web.mjs",
        "require": "./dist/antlr4.web.cjs",
        "default": "./dist/antlr4.web.mjs"
      }
    }
  }

And voilà, all dependencies have been installed.

Command shortcuts (specified in package.json) are available to start the project locally :

pnpm dev

and to build the project :

pnpm build

Note to VSCode users :

• It is strongly advised to install the ESLint and Prettier extensions.
• We use the so-called flat layout to configure ESLint's rules, which are not active by default in VSCode's ESLint extension. The eslint.experimental.useFlatConfig flag should be set to true.
• We strongly advise to enable the editor.formatOnSave flag to automatically format a document on save.

To modify the siteswap parser.

The siteswap parser uses ANTLR to generate parsers in many languages (namely Typescript in our case, but also python), but also as a runtime package to parse expressions for that grammar.

To install ANTLR :

TODO

• Git hooks ?
• Confifurer les règles pour prettier
• Experience with vite to compile project
• React at some point ?

NB : There is an index.html file at root as Vite needs it as its main entry point. In that file, it also assumes the presence of /src/ before file imports, hence the weirdnesses. Find a better solution at some point ?