Add `unpkg` key to package.json #936

appsforartists · 2018-12-13T05:34:25Z

This provides a completely bundled distribution, ready for importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work natively in the browser:

import { create as createJSS } from 'https://unpkg.com/jss';

The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get sizeSnapshot to work with the bundled version.

I also wonder how best to handle plugins/presets. The easiest options would be to add unpkg entry points to each package, and force authors to use multiple imports:

import { create as createJSS } from 'https://unpkg.com/jss';
import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default';

I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle jss-all that exports all the other packages. Then usage would be:

import * as jssAll from 'https://unpkg.com/jss-all';

const jss = jssAll.create(jssAll.preset());

Todo

Add unpkg field to every package
~~Understand and fix the sizeSnapshot crash~~
Make a jss-starter-kit package.
- console.warn that it's for learning and prototyping only, not bundled for production use.
Changelog
Docs here

appsforartists · 2018-12-13T05:36:31Z

I believe this would also enable me to post a mirror of JSS here:

https://developers.google.com/speed/libraries/

appsforartists · 2018-12-13T06:44:53Z

Here's an example:

https://unpkg.com/material-motion loads material-motion.bundle.js because unpkg is set in package.json.

HenriBeck · 2018-12-13T10:52:58Z

Please add to every package the unpkg key.

kof · 2018-12-13T10:55:40Z

Wow didn't know about this. Def. makes sense to me, lets create a list what needs to be done here! I started adding todos in the description, feel free to do so too!

TrySound · 2018-12-13T11:01:20Z

I think it make sense to bundle only commonjs packages. All left imports will be converted by unpkg to urls.

TrySound · 2018-12-13T11:11:12Z

jss-plugin-isolate

css-initials

jss-plugin-syntax-camel-case

hyphenate-style-name

jss-plugin-syntax-compose

warning (not required if we will stop support ie9 and use tiny-warning)

jss-plugin-syntax-extend

warning

jss-plugin-syntax-nested

warning

jss-plugin-syntax-template

warning

jss-plugin-vendor-prefixer

css-vendor

jss

warning

react-jss

hoist-non-react-statics
prop-types

kof · 2018-12-13T11:23:05Z

@appsforartists your material-motion.bundle.js seems to be a cjs with all the dependencies inside, right? I see no exports are used, so its basically bundled for a regular script loader, but we want to make it loadable with import, doesn't import require exports?

kof · 2018-12-13T11:28:11Z

Ah found export in the end of the bundle. Now I wonder if it uses ES export, its not a cjs bundle, right?

kof · 2018-12-13T11:34:02Z

Ok so its an esm bundle, I was just confused that you had no import statements at all.

kof · 2018-12-13T11:38:38Z

Now I get what @TrySound is saying. Inlining all cjs, because we want esm bundle and can't make require calls there. ESM capable dependencies can be imported even over unpkg

TrySound · 2018-12-13T13:49:35Z

Hm.. css-vendor is yours. This is cool :)

TrySound · 2018-12-13T13:51:52Z

Ideally all small packages could support esm so we could specify unpkg as an alias to module field. So we will need to make esm bundle only for react-jss

kof · 2018-12-13T13:54:02Z

@TrySound lets do it!

appsforartists · 2018-12-13T17:27:08Z

I don't see the automatic URL rewriting @TrySound is talking about. See wobble here:

https://unpkg.com/[email protected]/dist/interactions/NumericSpring.js

It's also better to bundle, even with ESM, to avoid network latency.

Anyone know anything about that sizeSnapshot crash?

TrySound · 2018-12-13T17:29:12Z

https://unpkg.com/[email protected]/dist/interactions/NumericSpring.js?module

appsforartists · 2018-12-13T17:36:51Z

Magic!

I still think we should distribute full bundles. It reduces network latency and supports CDNs that don't do fancy rewriting (e.g. Google Hosted Libraries). Plus, it's really easy to implement.

@kof are you 👍 on making a jss-all to make everything importable from a single file?

TrySound · 2018-12-13T17:44:58Z

This is just a feature for playing in sandboxes. Network latency should not matter here. There are huge and small modules. Some tool like bundler should still optimize them. Raw modules will be always a problem for production.

kof · 2018-12-13T18:11:39Z

@appsforartists What would be the use cases for bundling it all? I can imagine providing a react-jss bunde, jss core bundle, jss presets bundle and the rest separartely if at all. There are some plugins which are not part of the default preset (e.g. jss-isolate)

appsforartists · 2018-12-13T19:25:01Z

I mainly care about being able to import jss and preset from a single bundle, and was looking for a way to accomplish that. Since the main use case is for Codepens et. al., I haven't been that concerned about bundle size.

Looks like there's a multientry plugin. We might be able to do

  inputs: ['jss/index.js', 'jss-preset-default/index.js'],
  output: 'jss-preset-default/dist/jss-preset-default.bundle.js'
  plugins: [..., multientry(), ...],

(generated/introspected for the packages we care about). It's a little weird to import jss from jss-preset-default, but this keeps the dependencies pointed the right way.

The reason I was thinking about something like jss-all was to have a single bundle that could import the others to keep cycles out of the dependency graph. If all is not a useful unit, we could do the same thing in smaller pieces: jss-starter-kit could be jss, jss-preset-default. react-jss-starter-kit could be that with react-jss.

Would you be 👍 to jss-starter-kit and react-jss-starter-kit as new packages that bundle the commonly used exports?

TrySound · 2018-12-13T19:33:33Z

Why it's so hard to import 2 or 3 dependencies? Why another weird package for this? Why you care about network for playgrounds? All this stuff just adds more efforts for maintainers with no real reason.

Looks similar to wrapping react component just to hide a couple of boolean fields. Really weird and wasteful.

kof · 2018-12-13T20:36:55Z

Oh starter-kit or something similar sounds ok, in that case we can put there anything. Mb something even more clear to make sure people don't use it and then blame for bundle size, like a jss-sandbox or something

kof · 2018-12-13T20:39:16Z

@TrySound its an optimization for experimental and demo use, people don't want to care in that case what packages to use and how to setup, ideally for this use case there should be no setup reequired at all. Its the same reason why codesandbox is popular, it just works with one click.

kof · 2018-12-13T20:41:00Z

I assume this won't cost us much maintenance time, otherwise I wouldn't want to do that either.

appsforartists · 2018-12-14T01:59:28Z

Oleg stated my POV pretty well. Having an easy out-of-box experience for newcomers and a fast iteration cycle for prototyping are both really important.

I understand that all new code has a maintenance cost, but this should be pretty automatic - just using scripts to repackage the code that's already been written (and I'm doing all that work). Moreover, if a change is so burdensome that it make the starter kit hard to update, maybe it's a hint that it's hard for downstream authors to migrate too.

kof · 2018-12-15T00:17:38Z

packages/jss-starter-kit/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "jss-starter-kit",


still thinking about the name, other optitons:

jss-demo-kit/bundle

jss-playground+-(bundle/kit)

"starter kit" and "playground" are both known concepts in English. I wouldn't mix them, but if you prefer playground to starter-kit, I can make the change.

I was just brainstorming, if tou think its the best name, lets go for it

Cool. I don't have strong feelings on it. jss-starter-kit and jss-playground are both fine for me.

packages/jss-preset-default/package.json

packages/jss-starter-kit/src/index.js

This provides a completely bundled distribution, ready importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; ``` The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get `sizeSnapshot` to work with the bundled version. I also wonder how best to handle plugins/presets. The easiest options would be to add `unpkg` entry points to each `package`, and force authors to use multiple imports: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default'; ``` I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle `jss-all` that exports all the other packages. Then usage would be: ```typescript import * as jssAll from 'https://unpkg.com/jss-all'; const jss = jssAll.create(jssAll.preset()); ```

kof · 2018-12-21T14:33:15Z

created a new pr, that has this changes backed in + some more

kof · 2018-12-21T14:33:31Z

lets continue here #941

appsforartists · 2018-12-22T23:08:55Z

Per @HenriBeck's comments in #941, I wonder if we can split these back into dependent PRs. This seems to be passing except for BrowserStack (which should be irrelevant, since it's a bundling change and not a code one). @kof, do you know why BrowserStack fails?

kof · 2018-12-22T23:14:17Z

yeah, there is no way to pass the password to browserstack, so essentially its not running any tests, will look into it tomorrow

appsforartists · 2018-12-23T00:22:51Z

Cool.

I just merged my grammar fix into this PR. If it's a BrowserStack configuration issue, should we merge this PR, and then rebase the rename on top of it?

* Add `unpkg` key to package.json This provides a completely bundled distribution, ready importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; ``` The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get `sizeSnapshot` to work with the bundled version. I also wonder how best to handle plugins/presets. The easiest options would be to add `unpkg` entry points to each `package`, and force authors to use multiple imports: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default'; ``` I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle `jss-all` that exports all the other packages. Then usage would be: ```typescript import * as jssAll from 'https://unpkg.com/jss-all'; const jss = jssAll.create(jssAll.preset()); ``` * Add jss-starter-kit * Fixed grammar in warning * update snapshot

kof · 2018-12-23T12:19:03Z

merged from #944

kof · 2018-12-26T12:23:09Z

v10 alpha is published now, so starter kit is also available from unpkg now

appsforartists · 2018-12-26T17:29:29Z

https://unpkg.com/[email protected]/dist/jss-starter-kit.bundle.js

I see an import * from 'react-jss from the top of the file, which means a browser won't be able to parse that. We may need to explicitly re-export the named exports from react-jss.

kof · 2018-12-26T17:30:35Z

oh, true

kof · 2018-12-26T17:30:49Z

and remove that experimental babel plugin

TrySound · 2019-02-12T11:51:39Z

@appsforartists How are you gonna use react if you bundle it in this starter kit? React should have only one instance otherwise you get bugs. With this point react is unusable with browser esm without bundling step. I would still recommend to use codesandbox instead and drop unpkg field from it.

appsforartists · 2019-02-12T21:21:14Z

I haven't used react-jss, so I haven't given this much thought.

My intuition says that jss-starter-kit should probably ship without react-jss. There could be a jss-react-starter-kit that either expects a global variable called React, or inlines a version of React and exports it as React.

TrySound · 2019-05-26T15:53:10Z

FYI I fixed that problem with size snapshot plugin in 0.9

* Add `unpkg` key to package.json This provides a completely bundled distribution, ready importing from CDNs like unpkg.com for use in sandboxes like Codepen. It allows this code to work: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; ``` The PR is a work-in-progress, but I'd rather start a conversation with an example than with prose. As it is, I can't get `sizeSnapshot` to work with the bundled version. I also wonder how best to handle plugins/presets. The easiest options would be to add `unpkg` entry points to each `package`, and force authors to use multiple imports: ```typescript import { create as createJSS } from 'https://unpkg.com/jss'; import createDefaultJSSPreset from 'https://unpkg.com/jss-preset-default'; ``` I wonder what the best way to produce a batteries-included bundle is. Perhaps there should be another bundle `jss-all` that exports all the other packages. Then usage would be: ```typescript import * as jssAll from 'https://unpkg.com/jss-all'; const jss = jssAll.create(jssAll.preset()); ``` * Add jss-starter-kit * Fixed grammar in warning * update snapshot

appsforartists requested review from kof and TrySound December 13, 2018 05:34

appsforartists force-pushed the unpkg branch from 28bb032 to b5e6222 Compare December 14, 2018 06:23

kof reviewed Dec 15, 2018

View reviewed changes

packages/jss-preset-default/package.json Show resolved Hide resolved

kof reviewed Dec 15, 2018

View reviewed changes

packages/jss-starter-kit/src/index.js Outdated Show resolved Hide resolved

kof reviewed Dec 15, 2018

View reviewed changes

packages/jss-starter-kit/src/index.js Show resolved Hide resolved

appsforartists force-pushed the unpkg branch from b5e6222 to 5bcf5dd Compare December 18, 2018 02:15

This was referenced Dec 18, 2018

Cannot resolve webpack/buildin/harmony-module.js TrySound/rollup-plugin-size-snapshot#24

Closed

Provide settings to disable webpack or rollup TrySound/rollup-plugin-size-snapshot#25

Closed

appsforartists force-pushed the unpkg branch 3 times, most recently from 64d855a to 0de282a Compare December 19, 2018 23:16

appsforartists added 2 commits December 20, 2018 17:52

Add jss-starter-kit

d58b77c

appsforartists force-pushed the unpkg branch from 0de282a to d58b77c Compare December 21, 2018 01:52

kof closed this Dec 21, 2018

appsforartists reopened this Dec 22, 2018

appsforartists mentioned this pull request Dec 22, 2018

Removed -syntax from plugin package names. #941

Closed

Fixed grammar in warning

f9b424f

kof closed this Dec 23, 2018

Add unpkg key to package.json #936

Add unpkg key to package.json #936

Conversation

appsforartists commented Dec 13, 2018 • edited Loading

Todo

appsforartists commented Dec 13, 2018

appsforartists commented Dec 13, 2018

HenriBeck commented Dec 13, 2018

kof commented Dec 13, 2018 • edited Loading

TrySound commented Dec 13, 2018

TrySound commented Dec 13, 2018

kof commented Dec 13, 2018 • edited Loading

kof commented Dec 13, 2018 • edited Loading

kof commented Dec 13, 2018

kof commented Dec 13, 2018

TrySound commented Dec 13, 2018

TrySound commented Dec 13, 2018

kof commented Dec 13, 2018

appsforartists commented Dec 13, 2018

TrySound commented Dec 13, 2018

appsforartists commented Dec 13, 2018

TrySound commented Dec 13, 2018 • edited Loading

kof commented Dec 13, 2018

appsforartists commented Dec 13, 2018

TrySound commented Dec 13, 2018

kof commented Dec 13, 2018

kof commented Dec 13, 2018

kof commented Dec 13, 2018

appsforartists commented Dec 14, 2018

kof Dec 15, 2018

Choose a reason for hiding this comment

appsforartists Dec 18, 2018

Choose a reason for hiding this comment

kof Dec 18, 2018

Choose a reason for hiding this comment

appsforartists Dec 18, 2018

Choose a reason for hiding this comment

kof commented Dec 21, 2018

kof commented Dec 21, 2018

appsforartists commented Dec 22, 2018

kof commented Dec 22, 2018

appsforartists commented Dec 23, 2018

kof commented Dec 23, 2018

kof commented Dec 26, 2018

appsforartists commented Dec 26, 2018

kof commented Dec 26, 2018

kof commented Dec 26, 2018

TrySound commented Feb 12, 2019

appsforartists commented Feb 12, 2019

TrySound commented May 26, 2019

Add `unpkg` key to package.json #936

Add `unpkg` key to package.json #936

appsforartists commented Dec 13, 2018 •

edited

Loading

kof commented Dec 13, 2018 •

edited

Loading

kof commented Dec 13, 2018 •

edited

Loading

kof commented Dec 13, 2018 •

edited

Loading

TrySound commented Dec 13, 2018 •

edited

Loading