"fetch: lazy": don't download until the controller is present #15

weaverryan · 2021-01-22T19:31:20Z

Hi!

This deprecates the webpackMode option in controllers.json and replaces it with a new lazy option that can be set to eager or lazy.

The lazy mode is quite a bit smarter than the old webpackMode: 'lazy'. When you use this, the controller (and its dependencies) isn't downloaded until the corresponding data-controller appears on the page. This is great for things like chartjs, which is quite huge, but probably you don't have it on every page and a tiny delay is no problem.

PR to update the UX packages: symfony/ux#53

Cheers!

Fixes #3

tgalopin

Amazing! I love that this feature will be available!

README.md

src/webpack/create-controllers-module.js

tgalopin · 2021-01-24T20:16:07Z

Could you rebase?

weaverryan · 2021-01-25T02:17:38Z

src/webpack/create-controllers-module.js

+              });
+          }
+      }
+  }))


Because this runs after babel, we need to rewrite this into "old" JavaScript to support all browsers. I have the code locally, just need to put it in here :)

or maybe we can make this run before babel

That would be nice... I just could not find a way to do that :/. We effectively would need to change the "filename" of the output source to something that ends in .js and get Webpack to, sort of, "restart" the process so that the normal .js loader can match it. That may be possible, but I couldn't find away. And... really, we ship "dist" code normally that has been pre-compiled with Babel. This just a special case of doing the same (the strangeness being that I'll rewrite this to ES5 manually).

README.md

stof · 2021-01-26T07:57:46Z

dist/webpack/generate-lazy-controller.js

+ * @param {Number} indentationSpaces Amount each line should be indented
+ */
+
+module.exports = function generateLazyController(controllerPath, indentationSpaces) {


why do we have dist files committed in this repo ?

We should clean this up. Some dist files are needed because they're read at runtime in the browser - specifically the src/index.js file (which the user imports directly from their code and uses. But other things - like these loaders - are only executed at build time and do not need a dist.

even for the necessary ones, I don't think they need to be committed, as the npm ecosystem relies on a separate publishing step and so the VCS content and the package content can be different.

You're right about that too. None of them should be committed. However, we would need to make sure there was a more sophisticated build+publish functionality. The dist files are also committed in symfony/ux for the same reason: ease of distribution (because there is no automated build/release procedure).

symfony/ux packages are not distributed through npm but through composer.

npm already has a built-in automation: it will run the prepublishOnly script before building the archive for publication.
you only need to update the package.json to make that prepublishOnly script run npm run build and that's automated.

This repo could definitely not include the dist files at all indeed. I added them without too much thoughts after having added them in symfony/ux.

let's fix that in another PR

src/webpack/loader.js

dist/webpack/lazy-controller-loader.js

weaverryan · 2021-01-27T16:41:03Z

I've updated the PR to use a fetch option that allows eager or lazy. The old webpackMode is still accepted, but it is ignored (and triggers a deprecation warning to guide users). We're still experimental, so we don't need to do this - but it was a simple thing to help guide users.

tgalopin · 2021-01-31T20:18:00Z

CHANGELOG.md

+  in `controllers.json` to `lazy`, your controller will not
+  be downloaded until the controller element first appears on the page.
+
+* The `webpackMode` option in `controllers.json` was deprecated. Use


We should open a PR on UX and Flex to change this there. Do you have time to do it?

I already did! :) symfony/ux#53

But flex - I hadn’t thought about that piece - I’ll get that done

Flex PR: symfony/flex#735

Keeping webpackMode for support of people using an old Flex version

tgalopin · 2021-02-01T15:50:36Z

Thanks Ryan.

…ge#15 (weaverryan) This PR was merged into the main branch. Discussion ---------- Changing webpackMode to fetch - see symfony/stimulus-bridge#15 | Q | A | ------------- | --- | Bug fix? | yes(ish) | New feature? | no | Tickets | none | License | MIT Hi! If symfony/stimulus-bridge#15 is merged, this updates the keys for all the UX packages. The old `webpackMode` is kept for now. This will prevent errors if you're using an "old" Flex version (a version before this PR symfony/flex#735). We can remove that... eventually... Cheers! Commits ------- 27f7115 Adding fetch - see symfony/stimulus-bridge#15

Keeping webpackMode for support of people using an old Flex version

This PR was merged into the main branch. Discussion ---------- Lazy controllers for user-land controllers Hi! This allows users to make their own controllers "lazy" by adding a special comment above their controllers: ```js // assets/controllers/hello_controller.js import { Controller } from 'stimulus'; /* stimulusFetch: 'lazy' */ export default class extends Controller { // ... } ``` When you do this, your controller (and its dependencies) are *not* included in the main `app.js` built file. Instead, they are split into their own chunk/file. This file is loaded asynchronously the moment that the *first* element appears on the page for this controller (e.g. `<div data-controller="hello">`). This follows up on #15 (and only the last commit is new to this PR). The `/* stimulusFetch: 'lazy' */` is inspired by Webpack's `/* webpackMode: 'lazy' */` comments and uses the same mechanism to parse them. To activate this, you only need to process your controllers through a new loader: ```diff // assets/bootstrap.js export const app = startStimulusApp(require.context( - './controllers', + '@symfony/stimulus-bridge/lazy-controller-loader!./controllers', true, /\.(j|t)sx?$/ )); ``` That looks a bit ugly, but this is code that we'll give users via the recipe anyways. I've tested this in a real app and it works beautifully ❤️ . Cheers! Commits ------- bbf8ab0 Implementing a way to make user-land controllers lazy

… "fetch" mode (weaverryan) This PR was merged into the 1.9-dev branch. Discussion ---------- Changing to support next version of stimulus bridge with "fetch" mode Partner to symfony/stimulus-bridge#15 and symfony/ux#53 The tricky part about this is that, if the user has `stimulus-bridge` 1.x, then their `controllers.json` file needs `webpackMode`. If they have `stimulus-bridge` "next" (we're thinking it'll be 2.0), then their `controllers.json` file needs `fetch`. This means that Flex has a "hard break" and sorta just needs to assume that the user has the "new" version. We made the decision - to go from `webpackMode` to `fetch` because the setting no longer is truly the same as `webpackMode`. However, if we wanted to make the upgrade path easier, we could revert that and use `webpackMode` in 2.0 as well (instead of changing to `fetch`). Commits ------- 0c452b5 Changing to support next version of stimulus bridge with "fetch" mode

@weaverryan

…(kl3sk) This PR was merged into the main branch. Discussion ---------- Update README deprecated "webpackMode" in favor of "fetch" After @weaverryan symfony/stimulus-bridge#15 PR Encore complains: `The "webpackMode" config key is deprecated in controllers.json. Use "fetch" instead, set to either "eager" or "lazy".` | Q | A | ------------- | --- | Bug fix? | no | New feature? | no  | Tickets | Fix #...  | License | MIT  Commits ------- 463f429 Update README.md

@weaverryan

After @weaverryan symfony/stimulus-bridge#15 PR Encore complains: `The "webpackMode" config key is deprecated in controllers.json. Use "fetch" instead, set to either "eager" or "lazy".`

Keeping webpackMode for support of people using an old Flex version

…ge#15 (weaverryan) This PR was merged into the main branch. Discussion ---------- Changing webpackMode to fetch - see symfony/stimulus-bridge#15 | Q | A | ------------- | --- | Bug fix? | yes(ish) | New feature? | no | Tickets | none | License | MIT Hi! If symfony/stimulus-bridge#15 is merged, this updates the keys for all the UX packages. The old `webpackMode` is kept for now. This will prevent errors if you're using an "old" Flex version (a version before this PR symfony/flex#735). We can remove that... eventually... Cheers! Commits ------- 27f7115 Adding fetch - see symfony/stimulus-bridge#15

@weaverryan

After @weaverryan symfony/stimulus-bridge#15 PR Encore complains: `The "webpackMode" config key is deprecated in controllers.json. Use "fetch" instead, set to either "eager" or "lazy".`

@weaverryan

…(kl3sk) This PR was merged into the main branch. Discussion ---------- Update README deprecated "webpackMode" in favor of "fetch" After @weaverryan symfony/stimulus-bridge#15 PR Encore complains: `The "webpackMode" config key is deprecated in controllers.json. Use "fetch" instead, set to either "eager" or "lazy".` | Q | A | ------------- | --- | Bug fix? | no | New feature? | no  | Tickets | Fix #...  | License | MIT  Commits ------- 463f429 Update README.md

tgalopin reviewed Jan 22, 2021

View reviewed changes

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

src/webpack/create-controllers-module.js Show resolved Hide resolved

src/webpack/create-controllers-module.js Outdated Show resolved Hide resolved

weaverryan force-pushed the lazy-controllers branch from 1fe23c4 to 2909057 Compare January 22, 2021 20:44

weaverryan force-pushed the lazy-controllers branch from 2909057 to ca8d025 Compare January 25, 2021 00:17

weaverryan changed the title ~~lazy-controller mode: don't download until the controller is present~~ [WIP] lazy-controller mode: don't download until the controller is present Jan 25, 2021

weaverryan commented Jan 25, 2021

View reviewed changes

weaverryan changed the title ~~[WIP] lazy-controller mode: don't download until the controller is present~~ lazy-controller mode: don't download until the controller is present Jan 25, 2021

weaverryan force-pushed the lazy-controllers branch from 24634b3 to 2b9cd8f Compare January 25, 2021 19:55

stof reviewed Jan 26, 2021

View reviewed changes

weaverryan force-pushed the lazy-controllers branch from d2bac9c to e3b9161 Compare January 26, 2021 15:24

weaverryan mentioned this pull request Jan 26, 2021

Lazy controllers for user-land controllers #19

Merged

weaverryan changed the title ~~lazy-controller mode: don't download until the controller is present~~ "fetch: lazy": don't download until the controller is present Jan 27, 2021

weaverryan force-pushed the lazy-controllers branch 2 times, most recently from 510db70 to 1007648 Compare January 27, 2021 15:53

weaverryan added a commit to weaverryan/ux that referenced this pull request Jan 27, 2021

Changing webpackMode to fetch - see symfony/stimulus-bridge#15

65d2ecd

weaverryan mentioned this pull request Jan 27, 2021

Changing webpackMode to fetch - see symfony/stimulus-bridge#15 symfony/ux#53

Merged

weaverryan mentioned this pull request Jan 27, 2021

Add workflow to verify dist build #22

Closed

tgalopin reviewed Jan 31, 2021

View reviewed changes

weaverryan mentioned this pull request Feb 1, 2021

Changing to support next version of stimulus bridge with "fetch" mode symfony/flex#735

Merged

weaverryan added a commit to weaverryan/ux that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

27f7115

Keeping webpackMode for support of people using an old Flex version

"fetch: lazy": don't download until the controller is present

a9028b2

tgalopin force-pushed the lazy-controllers branch from 1007648 to a9028b2 Compare February 1, 2021 15:50

tgalopin merged commit 5a7d462 into symfony:main Feb 1, 2021

symfony-splitter pushed a commit to symfony/ux-swup that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

95f11b2

Keeping webpackMode for support of people using an old Flex version

symfony-splitter pushed a commit to symfony/ux-dropzone that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

ed111ac

Keeping webpackMode for support of people using an old Flex version

symfony-splitter pushed a commit to symfony/ux-chartjs that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

2235577

Keeping webpackMode for support of people using an old Flex version

symfony-splitter pushed a commit to symfony/ux-cropperjs that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

7c5f930

Keeping webpackMode for support of people using an old Flex version

symfony-splitter pushed a commit to symfony/ux-lazy-image that referenced this pull request Feb 1, 2021

Adding fetch - see symfony/stimulus-bridge#15

3de4530

Keeping webpackMode for support of people using an old Flex version

This was referenced Mar 2, 2021

Update README deprecated "webpackMode" in favor of "fetch" symfony/ux-dropzone#1

Closed

Update README deprecated "webpackMode" in favor of "fetch" symfony/ux#65

Merged

Huskarhero added a commit to Huskarhero/ux-lazy-image that referenced this pull request Nov 17, 2022

Adding fetch - see symfony/stimulus-bridge#15

5e43c13

jameswebapp added a commit to jameswebapp/ux that referenced this pull request Aug 1, 2023

Adding fetch - see symfony/stimulus-bridge#15

fc3576c

Keeping webpackMode for support of people using an old Flex version

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"fetch: lazy": don't download until the controller is present #15

"fetch: lazy": don't download until the controller is present #15

weaverryan commented Jan 22, 2021 •

edited

Loading

tgalopin left a comment

tgalopin commented Jan 24, 2021

weaverryan Jan 25, 2021

stof Jan 25, 2021

weaverryan Jan 25, 2021 •

edited

Loading

stof Jan 26, 2021

weaverryan Jan 26, 2021

stof Jan 26, 2021

weaverryan Jan 26, 2021

stof Jan 26, 2021

stof Jan 26, 2021

tgalopin Jan 26, 2021

weaverryan Jan 27, 2021

weaverryan commented Jan 27, 2021

tgalopin Jan 31, 2021

weaverryan Jan 31, 2021

weaverryan Jan 31, 2021

weaverryan Feb 1, 2021

tgalopin commented Feb 1, 2021

"fetch: lazy": don't download until the controller is present #15

"fetch: lazy": don't download until the controller is present #15

Conversation

weaverryan commented Jan 22, 2021 • edited Loading

tgalopin left a comment

Choose a reason for hiding this comment

tgalopin commented Jan 24, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan Jan 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan commented Jan 27, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tgalopin commented Feb 1, 2021

weaverryan commented Jan 22, 2021 •

edited

Loading

weaverryan Jan 25, 2021 •

edited

Loading