Vite plugin for FOSJsRoutingBundle #24

SkipTheDragon · 2024-04-14T11:33:38Z

No description provided.

netlify · 2024-04-14T11:33:56Z

✅ Deploy Preview for cosmic-bubblegum-aa631a ready!

Name	Link
🔨 Latest commit	`aeb0094`
🔍 Latest deploy log	https://app.netlify.com/sites/cosmic-bubblegum-aa631a/deploys/66e9a3f1b4fa5b000865fd19
😎 Deploy Preview	https://deploy-preview-24--cosmic-bubblegum-aa631a.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

SkipTheDragon · 2024-04-14T11:34:47Z

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.

…n/symfony-vite-dev into skipthedragon-feature/fos-routing

lhapaipai · 2024-04-20T21:02:38Z

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

src/vite-plugin-symfony/src/fos-routing/index.ts

src/vite-plugin-symfony/src/index.ts

…ync, writeFileSync bellow)

Merge Playground to featbranch

…s frequently than before feat: more verbose messages

SkipTheDragon · 2024-04-22T21:06:26Z

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:

Writing tests
Docs
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")

fix: changed docs to match feat: configured and tested the playground.

fix: tests

SkipTheDragon · 2024-06-03T20:56:53Z

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

lhapaipai · 2024-06-14T14:07:31Z

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

hi @SkipTheDragon !
I finally took the time to do the code review. sorry again for the delay... hope you don't mind diving back into the code
First, thank you very much for your great work 🙏🙏.

from a general point of view the whole thing holds together very well and that's the main thing! so I left you 2 - 3 comments here and there. afterwards I will have to look in more depth at the transform function of the file src/vite-plugin-symfony/src/fos-routing/index.ts I admit that given the lateness of the hour I did not had the courage to tackle the regular expression 🤯🤯

good night !!

docs/src/fos-routing/installation.md

docs/src/fos-routing/configuration.md

docs/src/fos-routing/in-depth.md

playground/fos-js-routing/config/packages/pentatrion_vite.yaml

src/vite-plugin-symfony/src/fos-routing/index.ts

playground/fos-js-routing/vite.config.js

lhapaipai · 2024-06-22T23:02:49Z

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 · 2024-06-23T06:39:36Z

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 · 2024-06-23T07:32:01Z

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 · 2024-06-24T16:13:27Z

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

SkipTheDragon · 2024-07-13T15:39:56Z

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

I have added this in the docs for now, until they add it on NPM or I find some time to add it myself.

src/vite-plugin-symfony/src/pluginOptions.ts

lhapaipai · 2024-08-21T07:17:35Z

src/vite-plugin-symfony/src/pluginOptions.ts

+   */
+  const defaultFosRouterPluginOptions = {
+    args: {
+      target: "var/cache/fosRoutes.json",


I am bothered by this target which is by default in the server.watch.ignored (src/vite-plugin-symfony/src/entrypoints/index.ts) we could add an exception this poses us 2 problems.

the 2 plugins are dependent on each other at the config level

if a developer defines the server.watch.ignored option by himself, he will not think to pay attention to the fosRouting.json file.

Hi @SkipTheDragon,
We have one last blocker left with this
what do you think about target path ?

I don't really understand the problem, the target does not have anything to do with server.watch.ignored.

However, you have written a case with the target here : https://github.com/SkipTheDragon/symfony-vite-dev/blob/aeb00940877ea7eb9d335565ecf48c35c288f385/src/vite-plugin-symfony/src/fos-routing/index.ts#L106

so you wanted to listen for changes in the json file to reload the page ?
currently this scenario cannot occur

I am not quite sure how to solve this, and my time has been pretty limited these past months, I don't know when i will be able to look deeper into this.

no problem, I will see and I will offer you a solution.
like you I haven't spent much time on this project in recent weeks but it would be cool if we could merge this pr.

src/vite-plugin-symfony/src/fos-routing/index.ts

lhapaipai

Hi @SkipTheDragon,
I applied a small review last night that I applied on the main branch (in the meantime I had switched TypeScript to strict mode which caused some errors)
https://github.com/lhapaipai/symfony-vite-dev/tree/skipthedragon/fos-routing

I left you some comments on some blockers that I have and that require your approval to continue and I will correct this on the code then I will translate the doc into fr.

I think I will merge your code for the next major release in a few days.

It will be great there will be lots of new features !!

Thank you !! and have a nice day

feat: added vite plugin for FOSJsRoutingBundle

93d7fb4

SkipTheDragon marked this pull request as draft April 14, 2024 14:37

SkipTheDragon mentioned this pull request Apr 14, 2024

Add support for FOSJsRoutingBundle lhapaipai/vite-plugin-symfony#42

Closed

lhapaipai added 3 commits April 18, 2024 22:03

Merge branch 'feature/fos-routing' of https://github.com/SkipTheDrago…

0b5166c

…n/symfony-vite-dev into skipthedragon-feature/fos-routing

add fos-js-routing playground

6ad29e5

fos-js-routing playground add js files

f9f87a6

lhapaipai requested changes Apr 20, 2024

View reviewed changes

src/vite-plugin-symfony/src/fos-routing/index.ts Outdated Show resolved Hide resolved

src/vite-plugin-symfony/src/index.ts Outdated Show resolved Hide resolved

lhapaipai and others added 9 commits April 20, 2024 23:13

update vscode launch file

2be2cbf

Merge branch 'lhapaipai:main' into feature/fos-routing

e38a4e2

fix: either Sync or await but not both at the same time (same for rmS…

27c742d

…ync, writeFileSync bellow)

fix: prettier

6c1f39e

fix: update resolvePluginOptions, add fosRouting key

e76233b

fix: support for symfony-ts-router and for single and double quotes

d4bc027

Merge branch 'feature/fos-routing' into fork-fos

cd93b5b

Merge pull request #1 from SkipTheDragon/fork-fos

6dbc13d

Merge Playground to featbranch

feat: replace handleHotUpdate with configureServer to dump routes les…

2cc2cc3

…s frequently than before feat: more verbose messages

SkipTheDragon added 6 commits May 22, 2024 00:25

refactor: reset launch.json and pnpm-lock.yaml.

3955ab1

fix: pnpm-lock.yaml and launch.json

3590438

feat: add docs

27a5d46

feat: tests fosRouter

ec3b548

feat: change behavior to setRoutes only once per entrypoint.

a1dc986

fix: changed docs to match feat: configured and tested the playground.

feat: deep merge options

d3bfea8

fix: tests

SkipTheDragon marked this pull request as ready for review June 3, 2024 20:49

SkipTheDragon requested a review from lhapaipai June 3, 2024 20:56

lhapaipai requested changes Jun 22, 2024

View reviewed changes

SkipTheDragon added 2 commits July 13, 2024 18:50

fix: partial 1/2

5b5ad53

fix: partial 2/2

e60811b

SkipTheDragon changed the title ~~[WIP] Vite plugin for FOSJsRoutingBundle~~ Vite plugin for FOSJsRoutingBundle Aug 10, 2024

SkipTheDragon requested a review from lhapaipai August 10, 2024 20:06

lhapaipai reviewed Aug 21, 2024

View reviewed changes

src/vite-plugin-symfony/src/pluginOptions.ts Outdated Show resolved Hide resolved

lhapaipai reviewed Aug 21, 2024

View reviewed changes

src/vite-plugin-symfony/src/fos-routing/index.ts Show resolved Hide resolved

lhapaipai reviewed Aug 21, 2024

View reviewed changes

src/vite-plugin-symfony/src/fos-routing/index.ts Show resolved Hide resolved

lhapaipai reviewed Aug 21, 2024

View reviewed changes

SkipTheDragon added 2 commits September 17, 2024 18:18

fix: partial extra

49ff181

feat: merge

aeb0094

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite plugin for FOSJsRoutingBundle #24

Vite plugin for FOSJsRoutingBundle #24

SkipTheDragon commented Apr 14, 2024

netlify bot commented Apr 14, 2024 •

edited

Loading

SkipTheDragon commented Apr 14, 2024 •

edited

Loading

lhapaipai commented Apr 20, 2024 •

edited

Loading

SkipTheDragon commented Apr 22, 2024 •

edited

Loading

SkipTheDragon commented Jun 3, 2024

lhapaipai commented Jun 14, 2024

lhapaipai left a comment

lhapaipai commented Jun 22, 2024 •

edited

Loading

lhapaipai commented Jun 23, 2024

lhapaipai commented Jun 23, 2024 •

edited

Loading

SkipTheDragon commented Jun 24, 2024

SkipTheDragon commented Jul 13, 2024

lhapaipai Aug 21, 2024

lhapaipai Sep 8, 2024

SkipTheDragon Sep 17, 2024

lhapaipai Sep 17, 2024

SkipTheDragon Oct 17, 2024

lhapaipai Oct 17, 2024

lhapaipai left a comment

Vite plugin for FOSJsRoutingBundle #24

Are you sure you want to change the base?

Vite plugin for FOSJsRoutingBundle #24

Conversation

SkipTheDragon commented Apr 14, 2024

netlify bot commented Apr 14, 2024 • edited Loading

✅ Deploy Preview for cosmic-bubblegum-aa631a ready!

SkipTheDragon commented Apr 14, 2024 • edited Loading

lhapaipai commented Apr 20, 2024 • edited Loading

SkipTheDragon commented Apr 22, 2024 • edited Loading

SkipTheDragon commented Jun 3, 2024

lhapaipai commented Jun 14, 2024

lhapaipai left a comment

Choose a reason for hiding this comment

lhapaipai commented Jun 22, 2024 • edited Loading

lhapaipai commented Jun 23, 2024

lhapaipai commented Jun 23, 2024 • edited Loading

SkipTheDragon commented Jun 24, 2024

SkipTheDragon commented Jul 13, 2024

lhapaipai Aug 21, 2024

Choose a reason for hiding this comment

lhapaipai Sep 8, 2024

Choose a reason for hiding this comment

SkipTheDragon Sep 17, 2024

Choose a reason for hiding this comment

lhapaipai Sep 17, 2024

Choose a reason for hiding this comment

SkipTheDragon Oct 17, 2024

Choose a reason for hiding this comment

lhapaipai Oct 17, 2024

Choose a reason for hiding this comment

lhapaipai left a comment

Choose a reason for hiding this comment

netlify bot commented Apr 14, 2024 •

edited

Loading

SkipTheDragon commented Apr 14, 2024 •

edited

Loading

lhapaipai commented Apr 20, 2024 •

edited

Loading

SkipTheDragon commented Apr 22, 2024 •

edited

Loading

lhapaipai commented Jun 22, 2024 •

edited

Loading

lhapaipai commented Jun 23, 2024 •

edited

Loading