[WIP] Vite plugin for FOSJsRoutingBundle

netlify[bot] commented 2 months ago

Deploy Preview for cosmic-bubblegum-aa631a canceled.

Name	Link
Latest commit	d3bfea83c3a2a661ccfa95530cef655f2317fee9
Latest deploy log	https://app.netlify.com/sites/cosmic-bubblegum-aa631a/deploys/665e2c4d07f3a20008c0195e

SkipTheDragon commented 2 months ago

I have used some hooks for rollup that are not inside Vite's Plugin type. So I casted it to Plugin, please advise if there is an alternative or if I didn't use the right hooks.

TODO:

Documentation
Tests
Playground

P.S. This is my first Vite plugin.

lhapaipai commented 2 months ago

Hi @SkipTheDragon, First, thank you for what you started doing ! To facilitate your development I advise you to use your own playground. I created one for you, you can reuse it and personalize it as you wish. https://github.com/lhapaipai/symfony-vite-dev/tree/skipthedragon-feature/fos-routing and of course I advise you to use the "vite-plugin-inspect" plugin intensively to see what code your plugin generates.

some ideas and recommendations :

can you associate your IDE with prettier src/vite-plugin-symfony/.prettierrc so that the TypeScript code is consistent between all files written by contributors
an entry point generally contains imports to other files which are likely to define import Routing from "fos-router"; our setRoutingData will only need to be called once per entry point (check that with "vite-plugin-inspect")
what if user writes import Routing from 'fos-router'; (simple quote ?) or import MyRouter from "fos-router"; or if he use "symfony-ts-router" ?
I don't recommend using the hook handleHotUpdate because it can become very complex. maybe start by simply reloading the vite dev server if the fos-routes.json file has been updated? (see full reload vite dev server if twig files are modified src/vite-plugin-symfony/src/entrypoints/index.ts) for the other hooks it seems good to me

Good luck for the future...

ps : maybe as a high priority look for prettier

SkipTheDragon commented 2 months ago

Hi, thanks for the playground and feedback!

I have already solved some of the raised concerns, hopefully I will have everything ready by the end of next week.

As a status update for this PR, the following are WIP:

[x] Writing tests
[x] Docs
[x] This point from the previous message:

an entry point generally contains imports to other files which are likely to define import Routing from "fos-router"; our setRoutingData will only need to be called once per entry point (check that with "vite-plugin-inspect")

SkipTheDragon commented 4 weeks ago

I'm not quite sure on how to solve the pnpm-lock.yaml conflict, but I can look into it if needed.

lhapaipai commented 2 weeks ago

hi @SkipTheDragon , thank you for your contribution and sorry for my late response. given the amount of code I haven't yet taken the time to do my review. but your contribution is very appreciated and as soon as I have a little time I will take care of doing the review. have a nice week end !

lhapaipai commented 1 week ago

last thing. I don't know why but for me if I import fos-router from ./vendor/friendsofsymfony/jsrouting-bundle/Resources/ with a package manager other than yarn (npm or pnpm) it doesn't work (this is why I imported the npm package 'fos-router' (https://www.npmjs.com/package/fos-router) in the playground

this crashes in my code

import Routing from "fos-router";

it does not recognize the default import. I suspect a problem between the es module and the umd format for local packages. but I don't fully understand the subject. Can you tell me if you also encounter this issue ? Thanks

lhapaipai commented 1 week ago

hi @SkipTheDragon, finally for the pnpm-lock.yaml conflict, simply take the pnpm-lock.yaml content from the main branch, put it on your branch and run pnpm i. It should work otherwise I will take care of it.

lhapaipai commented 1 week ago

last thing. I don't know why but for me if I import fos-router from ./vendor/friendsofsymfony/jsrouting-bundle/Resources/ with a package manager other than yarn (npm or pnpm) it doesn't work (this is why I imported the npm package 'fos-router' (https://www.npmjs.com/package/fos-router) in the playground

this crashes in my code
import Routing from "fos-router";
it does not recognize the default import. I suspect a problem between the es module and the umd format for local packages. but I don't fully understand the subject. Can you tell me if you also encounter this issue ? Thanks

ok I found the solution, it's because the 'fos-router' package is installed from local system and it's a commonjs package.

explanation Automatic dependency discovery

solution:

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
  plugins: [symfonyPlugin()],
  // that is for vite dev server
  optimizeDeps: {
    include: ["fos-router"],
  },
  build: {
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      },
    },
    // that is for the build step
    // for the @rollup/plugin-commonjs
    commonjsOptions: {
      include: [
        "vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js",
        /node_modules/,
      ],
    },
  },
});

another solution would be to ask FOSJsRoutingBundle to export a ESModule compatible export of their package (just a transpiled version of their router.ts would be enough ?). Actually, their code is wrapped into a js/router.template.js https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/blob/master/Resources/gulpfile.js

// https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/blob/master/Resources/package.json
{
  "name": "fos-router",
  "version": "2.5.0",
  "main": "public/js/router.js",
  "module": "public/js/router.mjs",
 ...
}

or to maintain an up to date version of their package in npmjs cf your comment

SkipTheDragon commented 1 week ago

Hi, thanks for the thorough review, I'll see what I can do. :)

lhapaipai / symfony-vite-dev