When setting option compile to never in command polymer serve (polymer serve --compile never) I expect that it doesn't transpile my ES6 code to ES5 but it compiles for Firefox and not for Chrome so I believe polymer serve is still using auto as compile option.
Firefox: imports rewritten as define([])
Chrome: imports kept untouched (import {} from)
polymer-cli v1.9.8
EDIT:
All imports are static
Are you talking about static ou dynamic imports?
Because since Firefox does not currently support dynamic import(), polymer serve has to convert them because otherwise the application wouldn't run at all. Even worse than not supporting them, Firefox throws a SyntaxError when they parse JavaScript files and see the aforementioned imports.
Related
I'm developing a Wordpress "widget" that is going to be a little react app. I've chosen create-react-app for this purpose.
Now I can see how to run the development server standalone easily enough, but I'd like to develop it while it sits inside the Wordpress website. I've created a trivial "Custom HTML" widget:
<div id="root"></div>
<script type="text/javascript" src="http://localhost:8080/static/js/bundle.js"></script>
This does not seem to work however...
Note I came up with /static/js/bundle.js by looking at the requests in the network tab when loading http://localhost:8080 directly, which is the prescribed way to access the dev version of the app.
So how do I access the development version of the app (with all the live reloading goodness) while embedded on my local version of the Wordpress site?
I had this same problem today in a PHP app I am developing. It is very frustrating to embed a create-react-app in development mode, and I had to consult a lot of different resources to learn how to do so. Here is a summary of my findings.
Using an iframe
Using an iframe to embed the create-react-app, as #quickshiftin suggests, is not a bad idea, but if you wish to pass configuration to the embedded SPA by calling methods or setting global variables in Javascript, it will not work* -- as the MDN documentation says (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting), iframes are subject to the same-origin policy.
* (Note: I found out after writing most of this answer that there is indeed a way to bypass the same-origin policy. It's called Window.postMessage(), and it's also mentioned in the section of the MDN documentation that I linked above. You may want to consider using that. But if you would like to avoid using an iframe for whatever reason, read on :)
Create-React-App file structure; embedding in production mode
The first thing you must know is that embedding bundle.js is not enough -- create-react-app builds multiple JS files that need to be embedded using <script> tags in the correct order. This blog post by Jeremiah Tabb describes the file structure of the bundled code and suggests a way to embed the create-react-app in production: https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f
The filenames of the bundled code contain hashes which change at every build. The hashing can't be disabled, it's a WONTFIX in create-react-app (https://github.com/facebook/create-react-app/issues/821). So, to get the bundled js filenames for a production build, in PHP, you can just traverse the build/static/js directory and output one <script> tag per .js file you find. (It may be wasteful to always request all chunks, but I haven't yet taken the time to look into the right way to do it.)
Development mode looks for chunks under the wrong path
But in development mode, which is your actual question, it is handled a bit differently. The index.html served by the dev server only loads three scripts initially: bundle.js, vendors~main.chunk.js and main.chunk.js. The other chunks are loaded dynamically. You can try embedding those three scripts on your Wordpress page, but you will find that at runtime, the 'bootstrap' code generated by Webpack looks for the chunks at the wrong URL, using e.g. localhost instead of localhost:3000, resulting in a chunk loading error.
PUBLIC_URL and "homepage" don't work in development mode
According to the Create-React-App documentation and various other answers on this site, you're supposed to be able to use the environment variable PUBLIC_URL or the key "homepage" in package.json to override the hostname and port where the JS code is served so that the chunks will load, but these settings don't do anything in development mode. This is an open issue in create-react-app: https://github.com/facebook/create-react-app/issues/9001
Workaround using npx patch-package
You might think you are in trouble and will have to eject your project and modify the webpack configuration yourself to get this working. But fortunately, there is a workaround described here in a comment by SergeyVolynkin which solves the problem without ejecting, using npx patch-package to patch react-dev-utils:
https://github.com/facebook/create-react-app/issues/9001#issuecomment-838370686
What SergeyVolynkin does not mention is that, after creating the patch and checking it into VCS, you should set up patch-package in your package.json so that the patches will be applied by npm / yarn when you run yarn / npm install. See the documentation for patch-package here: https://github.com/ds300/patch-package#set-up
Summary
After applying SergeyVolynkin's patch, I was able to get the development build embedded in my PHP app. I used the following scripts in my package.json:
"scripts": {
"start": "PORT=1234 PUBLIC_URL=http://localhost:1234 WDS_SOCKET_PORT=1234 react-scripts start",
"postinstall": "patch-package"
}
And I used the following lines in the HTML served by my PHP app:
<script src="http://localhost:1234/static/js/bundle.js"></script>
<script src="http://localhost:1234/static/js/vendors~main.chunk.js"></script>
<script src="http://localhost:1234/static/js/main.chunk.js"></script>
By doing this, I could embed an app created using create-react-app in dev mode in my PHP app.
In the default polymer.json file I see:
"extraDependencies": [
"bower_components/webcomponentsjs/*.js",
"!bower_components/webcomponentsjs/gulpfile.js",
"manifest.json"
],
The documentation is a little vague about it:
Dependencies that the analyzer component of the Polymer build toolchain can’t discover, possibly because they're not statically imported, and that do not need to be bundled.
Why can't the toolchain discover it?
IF they cannot be discovered, why would we need to include them?
If they "don't need to be bundled", what's actually done with them?
As the documentation says, the toolchain can't discover these files because they are not statically imported. The analyzer only knows about static imports like this:
<link rel="import" href="../bower_components/my-component.html">
Most likely your bower_components/webcomponentsjs/*.js library is being imported dynamically by checking if the browser supports web components natively, and loading in the web components polyfill if not. As for manifest.json, it's not imported as an HTML import, but as a manifest as follows:
<link rel="manifest" href="/manifest.json">
The extraDependencies need to be included if you are using polymer build to make a production build of your app, so the polymer-cli knows to include these files in your build.
The web components js files don't need to be bundled (note that they still need to be added to the build) because you don't want every app coming with the full web components polyfill, when browsers like Chrome already support it natively. The manifest.json should not be bundled because it is a standalone file needed to get metadata for your application.
How to set a Aurelia minimal project for work inside Browser
(no http server) how to set a bare minimum aurelia system/boilerplate
to work just inside browser (no NodeJS)
mainly for understanding/learning purpouses
no NodeJS (using just Javascript from latest browsers, advise Firefox Developper)
no npm (just download latest version and copy minimum files)
no folders (all in root flat folder for clarification and learn purpouses)
just ES6/7 (no Typescript, no Babel, etc)
just CSS use (no SASS, no LESS, etc.)
You should read the Quick Start in the docs and download the Basic Project Setup
However, there's no way to use ES6/7 without Babel (or other js compiler) today.
Take a look at this github repo: aurelia/aurelia which has a simple starter kit with a concatenated script-tag ready build.
Can I develop atom package with ES6?
I don't want to write CoffeeScript.
Atom reportedly using Chrome and V8, so I think it can use to develop package.
Yes, Atom can compile CoffeeScript, TypeScript, or ES6 (via Babel). To use Babel, just put
'use babel'
at the top of your file. If you only use the subset of ES6 that the version of Chrome that Atom uses implements, you don't even need Babel.
Dragging a local folder of files into the devtools adds them to the workspace so that you can persistently edit them. I just discovered the feature. However my files are all Babel transpiled and then I edit a file and hit cmd-s to save the changes Chrome checks the source and trips over es6 import statements with the error: Unexpected token import
Is there a way to make chrome not check the syntax? If it just edited the file without trying to compile it, Babel could pick it up and inject the changes via hot module replacement probably.
I recently watched this presentation named "Debugging the Web" on the new Chrome devtools. At around 15mins he talks about this subject.
Before you could make it work with proper configuration. With this update it should work out of the box!