From 79e1ddc24840eea2eab2e770029da449ed1afd9f Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Mon, 12 Dec 2016 07:52:20 -0800 Subject: [PATCH 01/12] PLAT-31148: support common singular entrypoint (#31) * PLAT-31148: support common singular entrypoint * Refactored to not need isRendered and load scripts sequentially * Removed unclear outdated comment * Fix isometric entrypoint filepath resolution * Syntax fix Reviewed-By: Aaron Tam (aaron.tam@lge.com) Integrated-By: Ryan Duffy (ryan.duffy@lge.com) --- config/html-template-isomorphic.ejs | 32 +++++++++++++++++------------ global-cli/pack.js | 9 +++++--- template/package.json | 2 +- template/src/index.js | 16 +++++++++++---- template/src/iso.js | 5 ----- 5 files changed, 38 insertions(+), 26 deletions(-) delete mode 100644 template/src/iso.js diff --git a/config/html-template-isomorphic.ejs b/config/html-template-isomorphic.ejs index 6c6e3f36..6a4577a0 100644 --- a/config/html-template-isomorphic.ejs +++ b/config/html-template-isomorphic.ejs @@ -34,26 +34,32 @@ requestAnimationFrame(function(){ <% if(!htmlWebpackPlugin.options.snapshot) { %> var count = 0; - var appendScript = function(src) { - count++; - var script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = src; - script.onload = function() { - count--; - if(count===0 && (typeof App === 'object') && window.ReactDOM) { - ReactDOM.render(App['default'] || App, document.getElementById('root')); + var appendScripts = function(js) { + if(js.length===0) { + if((typeof App === 'object') && (typeof ReactDOM === 'object')) { + var appEle = (App && App.__esModule) ? App['default'] : App; + if(typeof appEle === 'object' && appEle) { + ReactDOM.render(appEle, document.getElementById('root')); + } } - }; - document.body.appendChild(script); + } else { + var src = js.shift(); + var script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = src; + script.onload = function() { + appendScripts(js); + }; + document.body.appendChild(script); + } }; - <% for(var j=0; jappendScript('<%= htmlWebpackPlugin.files.js[j] %>');<% } %> + appendScripts(<%= JSON.stringify(htmlWebpackPlugin.files.js || []) %>); <% } else { %> if(window.iLib) { delete iLib._platform; iLib.setLocale(iLib.getLocale()); } - if(typeof App === 'object') { + if(typeof App === 'object' && (typeof ReactDOM === 'object')) { ReactDOM.render(App['default'] || App, document.getElementById('root')); } else { console.log('ERROR: Snapshot app not found'); diff --git a/global-cli/pack.js b/global-cli/pack.js index c3b6fd56..0a89d944 100755 --- a/global-cli/pack.js +++ b/global-cli/pack.js @@ -148,8 +148,9 @@ function setupFramework(config) { function setupIsomorphic(config, snapshot) { var meta = readJSON('package.json') || {}; var enact = meta.enact || {}; + var iso = enact.isomorphic || enact.prerender; // Only use isomorphic if an isomorphic entrypoint is specified - if(enact.isomorphic || enact.prerender) { + if(iso) { var reactDOM = path.join(process.cwd(), 'node_modules', 'react-dom', 'index.js'); if(!exists(reactDOM)) { reactDOM = require.resolve('react-dom'); @@ -158,8 +159,10 @@ function setupIsomorphic(config, snapshot) { // it to window.ReactDOM to allow runtime rendering of the app. config.entry.main.unshift(reactDOM); - // The App entrypoint for isomorphics builds *must* export a ReactElement. - config.entry.main[config.entry.main.length-1] = path.resolve(enact.isomorphic || enact.prerender); + // If 'isomorphic' value is a string, use custom entrypoint. + if(typeof iso === 'string') { + config.entry.main[config.entry.main.length-1] = path.resolve(iso); + } // Since we're building for isomorphic usage, expose ReactElement config.output.library = 'App'; diff --git a/template/package.json b/template/package.json index c42d3175..025a2be0 100644 --- a/template/package.json +++ b/template/package.json @@ -19,7 +19,7 @@ "private": true, "repository": "", "enact": { - "isomorphic": "src/iso.js", + "isomorphic": true, "ri": { "baseSize":24 } diff --git a/template/src/index.js b/template/src/index.js index 10371953..e04923de 100644 --- a/template/src/index.js +++ b/template/src/index.js @@ -2,7 +2,15 @@ import React from 'react'; import {render} from 'react-dom'; import App from './App'; -render( - , - document.getElementById('root') -); +let appElement = (); + +// In a browser environment, render instead of exporting +if (typeof window !== 'undefined') { + render( + appElement, + document.getElementById('root') + ); + appElement = null; +} + +export default appElement; \ No newline at end of file diff --git a/template/src/iso.js b/template/src/iso.js deleted file mode 100644 index 8ad820f5..00000000 --- a/template/src/iso.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import App from './App'; - -// Export the isomorphic entrypoint -export default (); From bfc058b042b448204b1c6fe97640d8a9861feb77 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 13 Dec 2016 10:40:11 -0800 Subject: [PATCH 02/12] Updated details of isomorphic build option. --- README.md | 4 ++-- template/README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a86cf287..f7d53972 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ These tasks will execute all valid tests (files that end in `-specs.js`) that ar The enact-dev tool will check the project's `package.json` looking for an optional `enact` object for a few customization options: * `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). -* `isomorphic` _[string]_ - Filepath to a custom isomorphic-compatible entrypoint (and can be built via the `--isomorphic` enact-dev flag). +* `isomorphic` _[boolean|string]_ - If `true`, it indicates the default entrypoint is isomorphic-compatible (and can be built via the `--isomorphic` enact-dev flag). If the value is a string, then it will use that value as a filepath to a custom isomorphic-compatible entrypoint. * `title` _[string]_ - Title text that should be put within the HTML's `` tags. Note: if this is a webOS-project, the title by default will be auto-detected from the appinfo.json content. * `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence). * `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). @@ -67,7 +67,7 @@ For example: { ... "enact": { - "isomorphic": "./src/iso.js", + "isomorphic": true, "ri": { "baseSize":24 } diff --git a/template/README.md b/template/README.md index 65f8ded9..d9ef3752 100644 --- a/template/README.md +++ b/template/README.md @@ -68,7 +68,7 @@ These tasks will execute all valid tests (files that end in `-specs.js`) that ar The enact-dev tool will check the project's `package.json` looking for an optional `enact` object for a few customization options: * `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). -* `isomorphic` _[string]_ - Filepath to a custom isomorphic-compatible entrypoint (and can be built via the `--isomorphic` enact-dev flag). +* `isomorphic` _[boolean|string]_ - If `true`, it indicates the default entrypoint is isomorphic-compatible (and can be built via the `--isomorphic` enact-dev flag). If the value is a string, then it will use that value as a filepath to a custom isomorphic-compatible entrypoint. * `title` _[string]_ - Title text that should be put within the HTML's `` tags. Note: if this is a webOS-project, the title by default will be auto-detected from the appinfo.json content. * `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence). * `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). @@ -78,7 +78,7 @@ For example: { ... "enact": { - "isomorphic": "./src/iso.js", + "isomorphic": true, "ri": { "baseSize":24 } From 6dbd0915e6c88b1dd7672b9c76730292371b8619 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 13 Dec 2016 10:41:11 -0800 Subject: [PATCH 03/12] Isomorphic template-side render depreciation notice --- config/html-template-isomorphic.ejs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/html-template-isomorphic.ejs b/config/html-template-isomorphic.ejs index 6a4577a0..f688be9f 100644 --- a/config/html-template-isomorphic.ejs +++ b/config/html-template-isomorphic.ejs @@ -39,6 +39,8 @@ if((typeof App === 'object') && (typeof ReactDOM === 'object')) { var appEle = (App && App.__esModule) ? App['default'] : App; if(typeof appEle === 'object' && appEle) { + console.warn('WARNING: HTML-side isomorphic rendering is depreciated and will be removed in a future release. Please conditionally render within the app itself.'); + console.warn(' See https://github.com/enyojs/enact-dev/blob/develop/template/src/index.js for an example entrypoint.'); ReactDOM.render(appEle, document.getElementById('root')); } } From a562322492cdf3bf6cb10343343423415b9f2325 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 13 Dec 2016 10:57:50 -0800 Subject: [PATCH 04/12] PLAT-32041: lint warnings prevent server address/port output --- global-cli/serve.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/global-cli/serve.js b/global-cli/serve.js index d058d49b..01d064e8 100755 --- a/global-cli/serve.js +++ b/global-cli/serve.js @@ -72,13 +72,6 @@ function setupCompiler(host, port, protocol) { if (!messages.errors.length && !messages.warnings.length) { console.log(chalk.green('Compiled successfully!')); console.log(); - console.log('The app is running at:'); - console.log(); - console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); - console.log(); - console.log('Note that the development build is not optimized.'); - console.log('To create a production build, use ' + chalk.cyan('npm run pack-p') + '.'); - console.log(); } // If errors exist, only show errors. @@ -104,7 +97,16 @@ function setupCompiler(host, port, protocol) { console.log('You may use special comments to disable some warnings.'); console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); + console.log(); } + + console.log('The app is running at:'); + console.log(); + console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); + console.log(); + console.log('Note that the development build is not optimized.'); + console.log('To create a production build, use ' + chalk.cyan('npm run pack-p') + '.'); + console.log(); }); } From 334253a0d6e9e28a6205aa6c449bebe83912a75a Mon Sep 17 00:00:00 2001 From: Dave Freeman Date: Tue, 13 Dec 2016 15:57:25 -0600 Subject: [PATCH 05/12] PLAT-26746: Create docs for app devs on "how to take advantage of snapshot" and isomorphic support and prerendering (must have) (#32) * add prerendering doc * Slight tweaks Enyo-DCO-1.1-Signed-off-by: Roy Sutton roy.sutton@lge.com --- docs/prerendering-support/index.md | 72 ++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 docs/prerendering-support/index.md diff --git a/docs/prerendering-support/index.md b/docs/prerendering-support/index.md new file mode 100644 index 00000000..19bc893e --- /dev/null +++ b/docs/prerendering-support/index.md @@ -0,0 +1,72 @@ +--- +title: Prerendering Support +--- +Prerendering, with regards to Enact apps, means that we render out the initial view during build. The app's initial +state is rendered via React into an HTML string and placed into the **index.html** file. + +Having the initial view as HTML allows the app to be visible as soon as the HTML is loaded. We don't have to wait +for the JavaScript to be fetched, parsed, and executed to see the general app layout. Furthermore, once the JavaScript +does load, the underlying React core will recognize the HTML and just add event listeners; no extra rendering needs to be +done. The end result is the appearance of significantly faster app load time. + +For your app to support prerendering, it should export a `ReactElement` object. This can easily be accomplished by creating +an isomorphic build. + +## How to Create an Isomorphic Build +Within your **package.json** file, add an 'isomorphic' property to the **enact** object: +``` +{ + ... + 'enact': { + ... + 'isomorphic':'./path/to/App' + } + ... +} +``` +Where **./path/to/App** is the relative path to the main app's module. It must be a module that exports a `ReactElement` +object. This can be an existing file or a new file created specifically for the purposes of prerendering. + +Then, you can choose to isomorphically build by adding the `--isomorphic` flag to the pack command: +``` +npm pack -- --isomorphic +npm pack-p -- --isomorphic +``` + +### When to Build Isomorphically +By default, `enact-dev` will not prerender your app and it should not be considered part of the regular development workflow. +It is advisable to only build in isomorphic format when you specifically want to test and ensure prerendering works. The +main purpose for isomorphic building is to optimize runtime when compiling in the webOS build environment. + +### How to Debug When Prerendering Fails +If prerendering fails, there will be a stack trace printed to the console and the build will continue without prerendering. +It's useful to build in development mode so that you can use the stack trace to determine where in the code the issue lies +without any minification getting in the way. + +Generally, when a prerender fails, it's due to `window` or `document` being used during initial state creation (prior to +mounting). Leave all access of those globals until after mount or wrap in an `if` statement to check global variable existence. + +**Important Note**: +``` +Prerendering requires an app to be coded such that it does not require access to the `window` or `document` to create its +initial state. The act of prerendering take place in a Node-based environment, so no `window` nor `document` are available. +If your app uses `document` or `window` in creation of its initial state, be sure to wrap those in `if` statements to avoid +prerender failure. For example: + + if(typeof window === 'object') { + // able to access window + } +``` + +## How It Works +When a build starts with isomorphic enabled, the app is built in a special pseudo-library layout, in a universal +module definition ([UMD](https://github.com/umdjs/umd)) format. In a Node environment, the top-level export is the `ReactElement` export of the 'isomorphic' +file. In a browser environment, a global variable, `App`, gets created and contains the exported `ReactElement` from the +'isomorphic' file. Additionally, `ReactDOM` is stored (though not used) within the build and is exposed for use on +`window.ReactDOM`. + +During the build process, a custom webpack plugin, `PrerenderPlugin`, will access the build within its Node environment and +use React's own [`ReactDOMServer`](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring) to render the initial state of the app into an HTML string and injects that into the +**index.html** file. This is the same API used in server-side rendering. + +When the webpage loads up, the built JavaScript is loaded, and then `window.ReactDOM` renders the `App` object. From 47525259cfa21197f2fc0c6b3906e0aa1aedc34d Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Mon, 19 Dec 2016 17:44:54 -0800 Subject: [PATCH 06/12] =?UTF-8?q?PLAT-31850L=20Move=20enact-dev=20wiki=20(?= =?UTF-8?q?svl=20wiki=20and=20github=20wiki)=20docs=20into=20=E2=80=A6=20(?= =?UTF-8?q?#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * PLAT-31850L Move enact-dev wiki (svl wiki and github wiki) docs into docs repo and get available on docs site * Markdown syntax fix * Typo fixed * General cleanup Enyo-DCO-1.1-Signed-off-by: Roy Sutton roy.sutton@lge.com --- docs/index.md | 10 +++++ docs/installation.md | 16 +++++++ docs/isomorphic-support.md | 54 ++++++++++++++++++++++ docs/loading-existing-app.md | 29 ++++++++++++ docs/prerendering-support/index.md | 72 ------------------------------ docs/starting-a-new-app.md | 47 +++++++++++++++++++ 6 files changed, 156 insertions(+), 72 deletions(-) create mode 100644 docs/index.md create mode 100644 docs/installation.md create mode 100644 docs/isomorphic-support.md create mode 100644 docs/loading-existing-app.md delete mode 100644 docs/prerendering-support/index.md create mode 100644 docs/starting-a-new-app.md diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..7027bd24 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,10 @@ +--- +title: enact-dev +--- + +The enact-dev package includes the following documentation: + +* [Installation](./installation.md) +* [Starting a New App](./starting-a-new-app.md) +* [Loading an Existing App](./loading-existing-app.md) +* [Insomorphic Support](./isomorphic-support.md) diff --git a/docs/installation.md b/docs/installation.md new file mode 100644 index 00000000..4d448381 --- /dev/null +++ b/docs/installation.md @@ -0,0 +1,16 @@ +--- +title: Installing enact-dev +--- +## Requirements + +Node 4.0 or later. Node 6.x/7.x is significantly faster on some machines and is highly recommended. + +## Installation via NPM + +All that's needed to install enact-dev is to use npm to install it globally. For Linux `sudo` may be required. + +``` +npm install -g enyojs/enact-dev +``` + +This preceding command will install the latest stable version. You can also use tagged versions (for example `enyojs/enact-dev#0.3.0`) or the potentially-unstable development branch (`enyojs/enact-dev#develop`). diff --git a/docs/isomorphic-support.md b/docs/isomorphic-support.md new file mode 100644 index 00000000..a54b90f0 --- /dev/null +++ b/docs/isomorphic-support.md @@ -0,0 +1,54 @@ +--- +title: Isomorphic Support +--- +Isomorphic code layout is a special feature which builds projects in a JavaScript layout that can be potentially processed by any environment, such as [NodeJS](https://nodejs.org) or the browser. One main benefit is that this code can be evaluated at build-time and prerendered into the HTML document ahead of time. + +## What is "Prerendering"? +Prerendering, with regards to Enact apps, means that we render out the initial state at build time. The app's initial state is rendered via React into an HTML string and placed into the **index.html** file. + +## Why Prerender? +Having the initial app state as HTML allows the app to be visible as soon as the HTML is rendered. We don't have to wait for the JavaScript to be fetched, parsed, and executed to see the general app layout. Furthermore, once the JavaScript does load, the underlying React core will recognize the HTML and just add event listeners; no extra rendering needs to be done. The end result is the appearance of significantly faster app load time. + +## How to Create an Isomorphic Build +Within your **package.json** file, add an `isomorphic` property to the `enact` object: +``` +{ + ... + "enact": { + ... + "isomorphic":true + } + ... +} +``` +If the value is a string filepath instead, it will use that file as the main app entrypoint instead of the default. Whatever the entrypoint, ensure it exports the `ReactElement` in non-browser environments. An example **index.js** entrypoint can be see [here](https://github.com/enyojs/enact-dev/blob/master/template/src/index.js) and is the default included in the Enact app template. + +Then, you can choose to build with isomorphic code layout by adding the `--isomorphic` flag to the pack command: +``` +npm pack -- --isomorphic +npm pack-p -- --isomorphic +``` + +### When to Build Isomorphically +By default, enact-dev will use not use isomorphic code layout, and it should not be considered part of the regular development workflow. It is advisable to only build in isomorphic format when you specifically want to test and ensure prerendering works or to use the app code in non-browser situations. + +### How to Debug When Prerendering Fails +If prerendering fails, there will be a stack trace printed to the console and the build will continue without prerendering. It's useful to build in development mode so that you can use the stack trace to determine where in the code the issue lies without any minification getting in the way. + +Generally, when a prerender fails, it's due to `window` or `document` being used during initial state creation (prior to mounting). Leave all access of those globals until after mount or wrap in an if-statement to check global variable existence. + +> **Important Note**: +> Prerendering requires an app to be coded such that it does not require access to `window` or `document` to create its initial state. The act of prerendering take place in a Node-based environment, so neither `window` nor `document` are available. +> If your app must use `document` or `window` in creation of its initial state, be sure to wrap those in if-statements to avoid prerender failure. For example: +> ``` +> if(typeof window !== 'undefined') { +> // able to access window +> } +>``` + +## How It Works +With an isomorphic build, the app is built in a special pseudo-library layout, in a universal module definition ([UMD](https://github.com/umdjs/umd)) format. In a Node environment, the top-level export is the `ReactElement` export of the 'isomorphic' file. In a browser environment, the app executes normally. + +During the build process, a custom webpack plugin, `PrerenderPlugin`, will access the build within its Node environment and use React's own [`ReactDOMServer`](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring) to render the initial state of the app into an HTML string and inject that into the **index.html** file. This is the same API used in server-side rendering. + +When the webpage loads up in a browser environment, the built JavaScript is loaded normally (and is expected to render itself into the HTML), except React will detect the DOM tree and will simply attach event listeners and go through the React lifecycle methods. diff --git a/docs/loading-existing-app.md b/docs/loading-existing-app.md new file mode 100644 index 00000000..a2e4d915 --- /dev/null +++ b/docs/loading-existing-app.md @@ -0,0 +1,29 @@ +--- +title: Loading an Existing App +--- +## Acquire the Source + +Download the app's source code, usually, from a git repository. Make sure you have correct SSH access rights for the repo. For example: + +``` +git clone git@github.com:user/myapp.git +``` + +## Install the Dependencies + +Enact apps are just like any other NPM package. Navigate to the app's root directory (the base directory with the **package.json**). From there, you can install the dependencies the standard way: + +``` +npm install +``` + +## Available NPM Tasks +NPM tasks vary by package and are defined within a `scripts` object in the **package.json** file. If the app was created via enact-dev, then it should support the following: + +* `npm run serve` - Packages and hosts the app on a local http server using [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html). Supports hot module replacement and inline updates as the source code changes. +* `npm run pack` - Packages the app into **./dist** in development mode (unminified code, with any applicable development code). +* `npm run pack-p` - Packages the app into **./dist** in production mode (minified code, with development code dropped). +* `npm run watch` - Packages in development mode and sets up a watcher that will rebuild the app whenever the source code changes. +* `npm run test` - Builds and executes any test spec files within the project. +* `npm run lint `- Lints the project's JavaScript files according to the Enact ESLint configuration settings. +* `npm run clean` - Deletes the **./dist** directory diff --git a/docs/prerendering-support/index.md b/docs/prerendering-support/index.md deleted file mode 100644 index 19bc893e..00000000 --- a/docs/prerendering-support/index.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Prerendering Support ---- -Prerendering, with regards to Enact apps, means that we render out the initial view during build. The app's initial -state is rendered via React into an HTML string and placed into the **index.html** file. - -Having the initial view as HTML allows the app to be visible as soon as the HTML is loaded. We don't have to wait -for the JavaScript to be fetched, parsed, and executed to see the general app layout. Furthermore, once the JavaScript -does load, the underlying React core will recognize the HTML and just add event listeners; no extra rendering needs to be -done. The end result is the appearance of significantly faster app load time. - -For your app to support prerendering, it should export a `ReactElement` object. This can easily be accomplished by creating -an isomorphic build. - -## How to Create an Isomorphic Build -Within your **package.json** file, add an 'isomorphic' property to the **enact** object: -``` -{ - ... - 'enact': { - ... - 'isomorphic':'./path/to/App' - } - ... -} -``` -Where **./path/to/App** is the relative path to the main app's module. It must be a module that exports a `ReactElement` -object. This can be an existing file or a new file created specifically for the purposes of prerendering. - -Then, you can choose to isomorphically build by adding the `--isomorphic` flag to the pack command: -``` -npm pack -- --isomorphic -npm pack-p -- --isomorphic -``` - -### When to Build Isomorphically -By default, `enact-dev` will not prerender your app and it should not be considered part of the regular development workflow. -It is advisable to only build in isomorphic format when you specifically want to test and ensure prerendering works. The -main purpose for isomorphic building is to optimize runtime when compiling in the webOS build environment. - -### How to Debug When Prerendering Fails -If prerendering fails, there will be a stack trace printed to the console and the build will continue without prerendering. -It's useful to build in development mode so that you can use the stack trace to determine where in the code the issue lies -without any minification getting in the way. - -Generally, when a prerender fails, it's due to `window` or `document` being used during initial state creation (prior to -mounting). Leave all access of those globals until after mount or wrap in an `if` statement to check global variable existence. - -**Important Note**: -``` -Prerendering requires an app to be coded such that it does not require access to the `window` or `document` to create its -initial state. The act of prerendering take place in a Node-based environment, so no `window` nor `document` are available. -If your app uses `document` or `window` in creation of its initial state, be sure to wrap those in `if` statements to avoid -prerender failure. For example: - - if(typeof window === 'object') { - // able to access window - } -``` - -## How It Works -When a build starts with isomorphic enabled, the app is built in a special pseudo-library layout, in a universal -module definition ([UMD](https://github.com/umdjs/umd)) format. In a Node environment, the top-level export is the `ReactElement` export of the 'isomorphic' -file. In a browser environment, a global variable, `App`, gets created and contains the exported `ReactElement` from the -'isomorphic' file. Additionally, `ReactDOM` is stored (though not used) within the build and is exposed for use on -`window.ReactDOM`. - -During the build process, a custom webpack plugin, `PrerenderPlugin`, will access the build within its Node environment and -use React's own [`ReactDOMServer`](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring) to render the initial state of the app into an HTML string and injects that into the -**index.html** file. This is the same API used in server-side rendering. - -When the webpage loads up, the built JavaScript is loaded, and then `window.ReactDOM` renders the `App` object. diff --git a/docs/starting-a-new-app.md b/docs/starting-a-new-app.md new file mode 100644 index 00000000..868c8a73 --- /dev/null +++ b/docs/starting-a-new-app.md @@ -0,0 +1,47 @@ +--- +title: Starting a New App +--- +## Generating the Base App Template +With the enact-dev tool installed, you can quickly create a new project with the following command: + +``` +enact init [directory] +``` +Where `[directory]` is the directory for the new project (or the working directory if omitted). This will generate a basic Moonstone template, complete with Enact, its libraries, React, and a fully configured **package.json**. + +## Enact Build Settings +The enact-dev tool will check the project's **package.json** looking for an optional `enact` object for a few customization options: + +* `template` _[string]_ - Filepath to an alternate HTML template to use with the [Webpack html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin). +* `isomorphic` _[boolean|string]_ - If `true`, it indicates the default entrypoint is isomorphic-compatible (and can be built via the `--isomorphic` enact-dev flag). If the value is a string, then it will use that value as a filepath to a custom isomorphic-compatible entrypoint. +* `title` _[string]_ - Title text that should be put within the HTML's `` tags. Note: if this is a webOS-project, the title, by default, will be auto-detected from the **appinfo.json** content. +* `ri` _[object]_ - Resolution independence options to be forwarded to the [LESS plugin](https://github.com/enyojs/less-plugin-resolution-independence). +* `proxy` _[string]_ - Proxy target during project `serve` to be used within the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). + +For example: +```js +{ + ... + "enact": { + "isomorphic": true, + "ri": { + "baseSize":24 + } + } + ... +} +``` +The `ri` value here (`baseSize=24`) is designed for 1080p TVs and similar resolutions. + +## Available NPM Tasks +Included within the app template are a number of NPM tasks available to build/run the app: + +* `npm run serve` - Packages and hosts the app on a local http server using [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html). Supports hot module replacement and inline updates as the source code changes. +* `npm run pack` - Packages the app into **./dist** in development mode (unminified code, with any applicable development code). +* `npm run pack-p` - Packages the app into **./dist** in production mode (minified code, with development code dropped). +* `npm run watch` - Packages in development mode and sets up a watcher that will rebuild the app whenever the source code changes. +* `npm run test` - Builds and executes any test spec files within the project. +* `npm run lint `- Lints the project's JavaScript files according to the Enact ESLint configuration settings. +* `npm run clean` - Deletes the **./dist** directory + +That's it! Now you have a fully functioning app environment. From 70f2294aae650ca3d7cd9e93fb195c04dcb384df Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 14:16:55 -0800 Subject: [PATCH 07/12] Properly handle parameters to allow clean command to execute --- global-cli/clean.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/global-cli/clean.js b/global-cli/clean.js index c302d856..c4292277 100755 --- a/global-cli/clean.js +++ b/global-cli/clean.js @@ -13,7 +13,7 @@ function displayHelp() { process.exit(0); } -module.exports = function() { +module.exports = function(args) { var opts = minimist(args, { boolean: ['h', 'help'], alias: {h:'help'} From da4a9ae972c35b17e0649aa71bff48304284ef3c Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 14:42:53 -0800 Subject: [PATCH 08/12] Reorganize 'pack' code for improved clarity/purpose. (#35) * Reorganize 'pack' code for improved clarity/purpose. Update outdated dependencies. Update template to Enact alpha.5. Snapshot flag should set a v8SnapshotFile appinfo.json property as needed. * CLI-side support for server http host/port * Fix unmangledSetup declaration --- global-cli/modifiers/externals.js | 13 ++ global-cli/modifiers/framework.js | 53 ++++++ global-cli/modifiers/index.js | 40 +++++ global-cli/modifiers/isomorphic.js | 70 ++++++++ global-cli/modifiers/snapshot.js | 26 +++ global-cli/modifiers/stats.js | 9 + global-cli/modifiers/unmangled.js | 12 ++ .../modifiers/util}/EnactFrameworkPlugin.js | 0 .../util}/EnactFrameworkRefPlugin.js | 0 .../modifiers/util}/PrerenderPlugin.js | 0 .../modifiers/util}/SnapshotPlugin.js | 15 ++ global-cli/modifiers/util/config-helper.js | 45 +++++ .../util}/html-template-isomorphic.ejs | 0 global-cli/pack.js | 170 +----------------- global-cli/serve.js | 19 +- package.json | 32 ++-- template/package.json | 16 +- 17 files changed, 322 insertions(+), 198 deletions(-) create mode 100644 global-cli/modifiers/externals.js create mode 100644 global-cli/modifiers/framework.js create mode 100644 global-cli/modifiers/index.js create mode 100644 global-cli/modifiers/isomorphic.js create mode 100644 global-cli/modifiers/snapshot.js create mode 100644 global-cli/modifiers/stats.js create mode 100644 global-cli/modifiers/unmangled.js rename {config => global-cli/modifiers/util}/EnactFrameworkPlugin.js (100%) rename {config => global-cli/modifiers/util}/EnactFrameworkRefPlugin.js (100%) rename {config => global-cli/modifiers/util}/PrerenderPlugin.js (100%) rename {config => global-cli/modifiers/util}/SnapshotPlugin.js (83%) create mode 100644 global-cli/modifiers/util/config-helper.js rename {config => global-cli/modifiers/util}/html-template-isomorphic.ejs (100%) diff --git a/global-cli/modifiers/externals.js b/global-cli/modifiers/externals.js new file mode 100644 index 00000000..e753c3b1 --- /dev/null +++ b/global-cli/modifiers/externals.js @@ -0,0 +1,13 @@ +var EnactFrameworkRefPlugin = require('./util/EnactFrameworkRefPlugin') + +module.exports = function(config, opts) { + // Add the reference plugin so the app uses the external framework + config.plugins.push(new EnactFrameworkRefPlugin({ + name: 'enact_framework', + libraries: ['@enact', 'react', 'react-dom'], + external: { + path: opts.externals, + inject: opts['externals-inject'] || opts.inject + } + })); +}; diff --git a/global-cli/modifiers/framework.js b/global-cli/modifiers/framework.js new file mode 100644 index 00000000..967c80c8 --- /dev/null +++ b/global-cli/modifiers/framework.js @@ -0,0 +1,53 @@ +var + path = require('path'), + glob = require('glob'), + exists = require('path-exists').sync, + snapshotSetup = require('./snapshot'), + helper = require('./util/config-helper'), + EnactFrameworkPlugin = require('./util/EnactFrameworkPlugin'); + +module.exports = function(config, opts) { + // Form list of framework entries; Every @enact/* js file as well as react/react-dom + var entry = glob.sync('@enact/**/*.@(js|jsx|es6)', { + cwd: path.resolve('./node_modules'), + nodir: true, + ignore: [ + './webpack.config.js', + './.eslintrc.js', + './karma.conf.js', + './build/**/*.*', + './dist/**/*.*', + './node_modules/**/*.*', + '**/tests/*.js' + ] + }).concat(['react', 'react-dom']); + if(!exists(path.join(process.cwd(), 'node_modules', 'react-dom', 'lib', 'ReactPerf.js'))) { + entry.push('react/lib/ReactPerf'); + } else { + entry.push('react-dom/lib/ReactPerf'); + } + config.entry = {enact:entry}; + + // Use universal module definition to allow usage and name as 'enact_framework' + config.output.library = 'enact_framework'; + config.output.libraryTarget = 'umd'; + + // Append additional options to the ilib-loader to skip './resources' detection/generation + var ilibLoader = helper.getLoaderByName(config, 'ilib'); + if(ilibLoader) { + ilibLoader.loader += '?noSave&noResources'; + } + + // Remove the HTML generation plugin and webOS-meta plugin + var unneeded = ['HtmlWebpackPlugin', 'WebOSMetaPlugin']; + for(var i=0; i=0) { + config.plugins.splice(i, 1); + } + } +} \ No newline at end of file diff --git a/config/html-template-isomorphic.ejs b/global-cli/modifiers/util/html-template-isomorphic.ejs similarity index 100% rename from config/html-template-isomorphic.ejs rename to global-cli/modifiers/util/html-template-isomorphic.ejs diff --git a/global-cli/pack.js b/global-cli/pack.js index 0a89d944..5ee41909 100755 --- a/global-cli/pack.js +++ b/global-cli/pack.js @@ -14,18 +14,12 @@ var fs = require('fs-extra'), path = require('path'), minimist = require('minimist'), - glob = require('glob'), filesize = require('filesize'), - exists = require('path-exists').sync, rimrafSync = require('rimraf').sync, webpack = require('webpack'), + modifiers = require('./modifiers'), devConfig = require('../config/webpack.config.dev'), prodConfig = require('../config/webpack.config.prod'), - EnactFrameworkPlugin = require('../config/EnactFrameworkPlugin'), - EnactFrameworkRefPlugin = require('../config/EnactFrameworkRefPlugin'), - PrerenderPlugin = require('../config/PrerenderPlugin'), - SnapshotPlugin = require('../config/SnapshotPlugin'), - BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin, checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'), recursive = require('recursive-readdir'), stripAnsi = require('strip-ansi'); @@ -96,134 +90,6 @@ function readJSON(file) { } } -function externalFramework(config, external, inject) { - // Add the reference plugin so the app uses the external framework - config.plugins.push(new EnactFrameworkRefPlugin({ - name:'enact_framework', - libraries:['@enact', 'react', 'react-dom'], - external: { - path: external, - inject: inject - } - })); -} - -function setupFramework(config) { - // Form list of framework entries; Every @enact/* js file as well as react/react-dom - var entry = glob.sync('@enact/**/*.@(js|jsx|es6)', { - cwd: path.resolve('./node_modules'), - nodir: true, - ignore: [ - './webpack.config.js', - './.eslintrc.js', - './karma.conf.js', - './build/**/*.*', - './dist/**/*.*', - './node_modules/**/*.*', - '**/tests/*.js' - ] - }).concat(['react', 'react-dom']); - if(!exists(path.join(process.cwd(), 'node_modules', 'react-dom', 'lib', 'ReactPerf.js'))) { - entry.push('react/lib/ReactPerf'); - } else { - entry.push('react-dom/lib/ReactPerf'); - } - config.entry = {enact:entry}; - - // Use universal module definition to allow usage and name as 'enact_framework' - config.output.library = 'enact_framework'; - config.output.libraryTarget = 'umd'; - - // Append additional options to the ilib-loader to skip './resources' detection/generation - config.module.loaders[2].loader += '?noSave&noResources'; - - // Remove the HTML generation plugin and webOS-meta plugin - config.plugins.shift(); - config.plugins.pop(); - - // Add the framework plugin to build in an externally accessible manner - config.plugins.push(new EnactFrameworkPlugin()); -} - -function setupIsomorphic(config, snapshot) { - var meta = readJSON('package.json') || {}; - var enact = meta.enact || {}; - var iso = enact.isomorphic || enact.prerender; - // Only use isomorphic if an isomorphic entrypoint is specified - if(iso) { - var reactDOM = path.join(process.cwd(), 'node_modules', 'react-dom', 'index.js'); - if(!exists(reactDOM)) { - reactDOM = require.resolve('react-dom'); - } - // Include react-dom as top level entrypoint so espose-loader will expose - // it to window.ReactDOM to allow runtime rendering of the app. - config.entry.main.unshift(reactDOM); - - // If 'isomorphic' value is a string, use custom entrypoint. - if(typeof iso === 'string') { - config.entry.main[config.entry.main.length-1] = path.resolve(iso); - } - - // Since we're building for isomorphic usage, expose ReactElement - config.output.library = 'App'; - - // Use universal module definition to allow usage in Node and browser environments. - config.output.libraryTarget = 'umd'; - - // Expose the 'react-dom' on a global context for App's rendering - // Currently maps the toolset to window.ReactDOM. - config.module.loaders.push({ - test: reactDOM, - loader: 'expose?ReactDOM' - }); - - // Update HTML webpack plugin to use the isomorphic template and include screentypes - config.plugins[0].options.inject = false; - config.plugins[0].options.template = path.join(__dirname, '..', 'config', - 'html-template-isomorphic.ejs'); - config.plugins[0].options.screenTypes = enact.screenTypes - || readJSON('./node_modules/@enact/moonstone/MoonstoneDecorator/screenTypes.json') - || readJSON('./node_modules/enact/packages/moonstone/MoonstoneDecorator/screenTypes.json'); - - // Include plugin to prerender the html into the index.html - config.plugins.push(new PrerenderPlugin()); - - // Apply snapshot specialization options if needed - if(snapshot) { - setupSnapshot(config); - } - } else { - console.log(chalk.yellow('Isomorphic entrypoint not found in package.json; building normally')); - } -} - -function setupSnapshot(config, isFramework) { - if(!isFramework) { - // Update HTML webpack plugin to mark it as snapshot mode for the isomorphic template - config.plugins[0].options.snapshot = true; - - // Expose iLib so we can update _platform value once page loads, if used - config.module.loaders.push({ - test: path.join(process.cwd(), 'node_modules', '@enact', 'i18n', 'ilib', 'lib', 'ilib.js'), - loader: 'expose?iLib' - }); - } - - // Include plugin to attempt generation of v8 snapshot binary if V8_MKSNAPSHOT env var is set - config.plugins.push(new SnapshotPlugin({ - target: (isFramework ? 'enact.js' : 'main.js'), - append: (isFramework ? '\nenact_framework.load();\n' : undefined) - })); -} - -function statsAnalyzer(config) { - config.plugins.push(new BundleAnalyzerPlugin({ - analyzerMode: 'static', - reportFilename: 'stats.html', - openAnalyzer: false - })); -} - // Create the build and optionally, print the deployment instructions. function build(config, previousSizeMap, guided) { if(process.env.NODE_ENV === 'development') { @@ -308,44 +174,16 @@ module.exports = function(args) { }); opts.help && displayHelp(); - var config; + process.env.NODE_ENV = 'development'; + var config = devConfig; // Do this as the first thing so that any code reading it knows the right env. if(opts.production) { process.env.NODE_ENV = 'production'; config = prodConfig; - if(!opts['minify']) { - // Allow Uglify's optimizations/debug-code-removal but don't minify - config.plugins[4].options.mangle = false; - config.plugins[4].options.beautify = true; - config.plugins[4].options.output.comments = true; - } - } else { - process.env.NODE_ENV = 'development'; - config = devConfig; } - if(opts.framework) { - setupFramework(config); - if(opts.snapshot) { - setupSnapshot(config, true); - } - } else { - // Backwards compatibility for <15.4.0 React - if(!exists(path.join(process.cwd(), 'node_modules', 'react-dom', 'lib', 'ReactPerf.js'))) { - config.resolve.alias['react-dom/lib/ReactPerf'] = 'react/lib/ReactPerf'; - } - if(opts.isomorphic) { - setupIsomorphic(config, (opts.snapshot && !opts.externals)); - } - if(opts.externals) { - externalFramework(config, opts.externals, opts['externals-inject']); - } - } - - if(opts.stats) { - statsAnalyzer(config); - } + modifiers.apply(config, opts); // Warn and crash if required files are missing if (!opts.framework && !checkRequiredFiles([config.entry.main[config.entry.main.length-1]])) { diff --git a/global-cli/serve.js b/global-cli/serve.js index 01d064e8..ac4dfe4e 100755 --- a/global-cli/serve.js +++ b/global-cli/serve.js @@ -250,11 +250,11 @@ function runDevServer(host, port, protocol, shouldOpen) { }); } -function run(port, shouldOpen) { +function run(port, opts) { var protocol = process.env.HTTPS === 'true' ? "https" : "http"; - var host = process.env.HOST || config.devServer.host || 'localhost'; + var host = process.env.HOST || opts.host || config.devServer.host || 'localhost'; setupCompiler(host, port, protocol); - runDevServer(host, port, protocol, shouldOpen); + runDevServer(host, port, protocol, opts.browser); } function displayHelp() { @@ -263,6 +263,8 @@ function displayHelp() { console.log(); console.log(' Options'); console.log(' -b, --browser Automatically open browser'); + console.log(' -i, --host Server host IP address'); + console.log(' -p, --port Server port number'); console.log(' -v, --version Display version information'); console.log(' -h, --help Display help information'); console.log(); @@ -271,8 +273,9 @@ function displayHelp() { module.exports = function(args) { var opts = minimist(args, { + string: ['i', 'host', 'p', 'port'], boolean: ['b', 'browser', 'h', 'help'], - alias: {b:'browser', h:'help'} + alias: {b:'browser', i:'host', p:'port', h:'help'} }); opts.help && displayHelp(); @@ -284,13 +287,13 @@ module.exports = function(args) { } // Tools like Cloud9 rely on this. - var DEFAULT_PORT = process.env.PORT || config.devServer.port || 8080; + var DEFAULT_PORT = process.env.PORT || opts.port || config.devServer.port || 8080; // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `detect()` Promise resolves to the next free port. detect(DEFAULT_PORT).then(port => { - if (port === DEFAULT_PORT) { - run(port, opts.browser); + if (port == DEFAULT_PORT) { + run(port, opts); return; } @@ -301,7 +304,7 @@ module.exports = function(args) { prompt(question, true).then(shouldChangePort => { if (shouldChangePort) { - run(port, opts.browser); + run(port, opts); } }); }); diff --git a/package.json b/package.json index 0f533bbe..6fae24d6 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "enact": "./bin/enact.js" }, "dependencies": { - "autoprefixer": "~6.5.3", - "babel-core": "~6.18.2", + "autoprefixer": "~6.5.4", + "babel-core": "~6.21.0", "babel-eslint": "~7.1.1", - "babel-loader": "~6.2.8", + "babel-loader": "~6.2.10", "babel-plugin-dev-expression": "~0.2.1", "babel-plugin-transform-react-constant-elements": "~6.9.1", "babel-plugin-transform-react-inline-elements": "~6.8.0", @@ -26,11 +26,11 @@ "connect-history-api-fallback": "~1.3.0", "cross-spawn": "~5.0.1", "css-loader": "~0.26.1", - "detect-port": "~1.0.6", + "detect-port": "~1.0.7", "dirty-chai": "~1.2.2", "enyo-console-spy": "enyojs/enyo-console-spy", "enzyme": "~2.6.0", - "eslint": "~3.11.1", + "eslint": "~3.12.2", "eslint-config-enact": "enyojs/eslint-config-enact#1.1.1", "eslint-loader": "~1.6.1", "eslint-plugin-babel": "~4.0.0", @@ -45,7 +45,7 @@ "glob": "~7.1.1", "graceful-fs-webpack-plugin": "enyojs/graceful-fs-webpack-plugin#0.1.0", "html-webpack-plugin": "~2.24.1", - "http-proxy-middleware": "~0.17.2", + "http-proxy-middleware": "~0.17.3", "ilib-loader": "enyojs/ilib-loader#0.1.1", "json-loader": "~0.5.4", "karma": "~1.3.0", @@ -63,20 +63,20 @@ "minimist": "~1.2.0", "mocha": "~3.2.0", "ncp": "~2.0.0", - "node-fetch": "^1.6.3", + "node-fetch": "~1.6.3", "object-assign": "~4.1.0", "path-exists": "~3.0.0", - "phantomjs-prebuilt": "~2.1.13", - "postcss-loader": "~1.2.0", + "phantomjs-prebuilt": "~2.1.14", + "postcss-loader": "~1.2.1", "postcss-remove-classes": "~1.0.2", "promise": "~7.1.1", - "react": "~15.4.0", - "react-addons-perf": "~15.4.0", - "react-addons-test-utils": "~15.4.0", - "react-dev-utils": "~0.4.0", - "react-dom": "~15.4.0", + "react": "~15.4.1", + "react-addons-perf": "~15.4.1", + "react-addons-test-utils": "~15.4.1", + "react-dev-utils": "~0.4.2", + "react-dom": "~15.4.1", "recursive-readdir": "~2.1.0", - "require-from-string": "^1.2.1", + "require-from-string": "~1.2.1", "resolution-independence": "~0.0.3", "rimraf": "~2.5.4", "semver": "~5.3.0", @@ -86,7 +86,7 @@ "strip-ansi": "~3.0.1", "style-loader": "~0.13.1", "webos-meta-webpack-plugin": "enyojs/webos-meta-webpack-plugin#0.1.1", - "webpack": "~1.13.3", + "webpack": "~1.14.0", "webpack-bundle-analyzer": "~2.1.1", "webpack-dev-server": "~1.16.2", "whatwg-fetch": "~2.0.1" diff --git a/template/package.json b/template/package.json index 025a2be0..5d930746 100644 --- a/template/package.json +++ b/template/package.json @@ -28,13 +28,13 @@ "extends": "enact" }, "dependencies": { - "@enact/core": "^1.0.0-alpha.4", - "@enact/ui": "^1.0.0-alpha.4", - "@enact/moonstone": "^1.0.0-alpha.4", - "@enact/spotlight": "^1.0.0-alpha.4", - "@enact/i18n": "^1.0.0-alpha.4", - "@enact/webos": "^1.0.0-alpha.4", - "react": "^15.4.0", - "react-dom": "^15.4.0" + "@enact/core": "^1.0.0-alpha.5", + "@enact/ui": "^1.0.0-alpha.5", + "@enact/moonstone": "^1.0.0-alpha.5", + "@enact/spotlight": "^1.0.0-alpha.5", + "@enact/i18n": "^1.0.0-alpha.5", + "@enact/webos": "^1.0.0-alpha.5", + "react": "^15.4.1", + "react-dom": "^15.4.1" } } From 4cdb2ce212155f2f606d3d468273044bdea9decc Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 16:45:43 -0800 Subject: [PATCH 09/12] Remove unused readJSON function --- global-cli/pack.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/global-cli/pack.js b/global-cli/pack.js index 5ee41909..3c55cc2a 100755 --- a/global-cli/pack.js +++ b/global-cli/pack.js @@ -82,14 +82,6 @@ function printFileSizes(stats, previousSizeMap) { }); } -function readJSON(file) { - try { - return JSON.parse(fs.readFileSync(file, {encoding:'utf8'})); - } catch(e) { - return undefined; - } -} - // Create the build and optionally, print the deployment instructions. function build(config, previousSizeMap, guided) { if(process.env.NODE_ENV === 'development') { From f95e9549e635f8c7abf0abc4a25d25d94f824512 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 16:46:24 -0800 Subject: [PATCH 10/12] 0.5.0 release updates --- CHANGELOG.md | 26 ++++++++++++++++++++++++++ template/package.json | 12 ++++++------ template/webos-meta/appinfo.json | 2 +- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3aefdef8..cc66ea77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,29 @@ +## 0.5.0 (December 20, 2016) + +Several additional documentation files have been added to the `docs` directory, to cover common topics. + +### create + +* Template updated for Enact 1.0.0-beta.1 +* Template has been updated to use a single isomorphic-compatible entrypoint [index.js](https://github.com/enyojs/enact-dev/blob/master/template/src/index.js). + +## serve + +* Added support for `--host` option to specify a server host IP address to use. +* Added support for `--port` option to specify a server port humber to use. +* The host/port details will now correctly output when linter warnings occur. + +### pack + +* Added primary support for singluar entrypoints for both regular and isomorphic code layouts. +* Refactored build customization features (like `--isomorphic` and `--stats`) into separate files and cleaned up the implementations. +* Depreciated isomorphic HTML-side rendering. Isomorphic entrypoints should render to the DOM when in a browser environment. + +### clean + +* Fixed clean command failing due to missing internal parameters. + + ## 0.4.0 (December 5, 2016) ### create diff --git a/template/package.json b/template/package.json index 5d930746..282f1a07 100644 --- a/template/package.json +++ b/template/package.json @@ -28,12 +28,12 @@ "extends": "enact" }, "dependencies": { - "@enact/core": "^1.0.0-alpha.5", - "@enact/ui": "^1.0.0-alpha.5", - "@enact/moonstone": "^1.0.0-alpha.5", - "@enact/spotlight": "^1.0.0-alpha.5", - "@enact/i18n": "^1.0.0-alpha.5", - "@enact/webos": "^1.0.0-alpha.5", + "@enact/core": "^1.0.0-beta.1", + "@enact/ui": "^1.0.0-beta.1", + "@enact/moonstone": "^1.0.0-beta.1", + "@enact/spotlight": "^1.0.0-beta.1", + "@enact/i18n": "^1.0.0-beta.1", + "@enact/webos": "^1.0.0-beta.1", "react": "^15.4.1", "react-dom": "^15.4.1" } diff --git a/template/webos-meta/appinfo.json b/template/webos-meta/appinfo.json index 0de2eb72..acacfca9 100644 --- a/template/webos-meta/appinfo.json +++ b/template/webos-meta/appinfo.json @@ -1,6 +1,6 @@ { "id": "com.webos.app.enact.template", - "version": "2.6.0-pre.7", + "version": "1.0.0", "vendor": "LGE-SVL", "type": "web", "main": "index.html", From ae3ab977dcb188dd84c310b05ca3fd4acc62e717 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 16:49:33 -0800 Subject: [PATCH 11/12] Update version to 0.5.0 for release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6fae24d6..f5915503 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "enact-dev", - "version": "0.4.0", + "version": "0.5.0", "description": "Full-featured build environment for Enact applications.", "main": "index.js", "author": "Jason Robitaille ", From 5f5096d8670b8f00dfe81e62bea32c7bf6bb4de5 Mon Sep 17 00:00:00 2001 From: Jason Robitaille Date: Tue, 20 Dec 2016 16:50:35 -0800 Subject: [PATCH 12/12] Fix module export value to create from init --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index dae808f3..e9b3956c 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ module.exports = { - init: require('./global-cli/init'), + create: require('./global-cli/create'), pack: require('./global-cli/pack'), serve: require('./global-cli/serve'), clean: require('./global-cli/clean'),