Skip to content

Commit

Permalink
feat(generators): NativeScript 5.0 with HMR (#50)
Browse files Browse the repository at this point in the history
  • Loading branch information
NathanWalker authored Nov 14, 2018
1 parent 07da45f commit d072e19
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 29 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@nstudio/schematics",
"version": "6.3.3",
"version": "7.0.0",
"description": "Cross-platform (xplat) tools for Nx workspaces.",
"readmeFilename": "README.md",
"scripts": {
Expand Down
25 changes: 22 additions & 3 deletions src/app.nativescript/_files/app/main.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,31 @@
// https://github.com/NativeScript/nativescript-dev-webpack/issues/660#issuecomment-422711983
import 'reflect-metadata';
import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { AppOptions } from 'nativescript-angular/platform-common';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

// If built with env.uglify
if (global['UGLIFIED']) {
enableProdMode();
declare const __UGLIFIED__;
if (typeof __UGLIFIED__ !== 'undefined' && __UGLIFIED__) {
require('@angular/core').enableProdMode();
}

platformNativeScriptDynamic().bootstrapModule(AppModule);
let options: AppOptions = {};
if (module['hot']) {
const hmrUpdate = require('nativescript-dev-webpack/hmr').hmrUpdate;

options.hmrOptions = {
moduleTypeFactory: () => AppModule,
livesyncCallback: (platformReboot) => {
console.log("HMR: Sync...")
hmrUpdate();
setTimeout(platformReboot, 0);
},
}
hmrUpdate();

module['hot'].accept(['./app.module']);
}

platformNativeScriptDynamic(options).bootstrapModule(AppModule);
1 change: 1 addition & 0 deletions src/app.nativescript/_files/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"android": {
"v8Flags": "--expose_gc"
},
"discardUncaughtJsExceptions": true,
"main": "main.js"
}
6 changes: 3 additions & 3 deletions src/app.nativescript/_files/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@
"zone.js": "file:../../node_modules/zone.js"
},
"devDependencies": {
"@angular/compiler-cli": "~6.1.0",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "file:../../node_modules/@angular/language-service",
"@ngtools/webpack": "~6.2.1",
"@ngtools/webpack": "~7.0.0",
"codelyzer": "file:../../node_modules/codelyzer",
"nativescript-dev-webpack": "~0.16.0",
"nativescript-dev-webpack": "~0.18.0",
"tns-platform-declarations": "file:../../node_modules/tns-platform-declarations",
"typescript": "file:../../node_modules/typescript"
}
Expand Down
31 changes: 18 additions & 13 deletions src/app.nativescript/_files/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ module.exports = env => {
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hmr, // --env.hmr,
} = env;
const externals = (env.externals || []).map((e) => { // --env.externals
return new RegExp(e + ".*");
});

const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
Expand All @@ -62,6 +66,7 @@ module.exports = env => {
const config = {
mode: uglify ? "production" : "development",
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
Expand Down Expand Up @@ -124,9 +129,9 @@ module.exports = env => {
minimize: !!uglify,
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true,
uglifyOptions: {
parallel: true,
cache: true,
output: {
comments: false,
},
Expand All @@ -146,11 +151,14 @@ module.exports = env => {
'this._log.error',
'this._log.info',
'this._log.warn',
]
],
global_defs: {
__UGLIFIED__: true,
}
},
// custom
ecma: 6,
safari10: platform !== 'android',
safari10: platform !== 'android'
}
})
],
Expand Down Expand Up @@ -198,7 +206,6 @@ module.exports = env => {
{ test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
{ test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

// Compile TypeScript files with ahead-of-time compiler.
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
Expand All @@ -219,10 +226,6 @@ module.exports = env => {
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"global.UGLIFIED": uglify,
"__IS_NATIVESCRIPT__": "true",
"__IS_IOS__": JSON.stringify(platform === "ios"),
"__IS_ANDROID__": JSON.stringify(platform === "android"),
"process": undefined,
}),
// Remove all files from the out dir.
Expand All @@ -237,10 +240,8 @@ module.exports = env => {
]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: 'assets/**' },
{ from: "fonts/**" },
{ from: "**/*.jpg" },
{ from: "**/*.png" },
{ from: "assets/**" },
{ from: "fonts/**" }
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin([
Expand Down Expand Up @@ -286,5 +287,9 @@ module.exports = env => {
}));
}

if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}

return config;
};
4 changes: 2 additions & 2 deletions src/app.nativescript/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export default function (options: ApplicationOptions) {
(tree: Tree) => {
const scripts = {};
scripts[`clean`] = `npx rimraf -- hooks node_modules package-lock.json && npm i`;
scripts[`start.nativescript.${options.name}.ios`] = `cd apps/nativescript-${options.name} && tns run ios --emulator --bundle --env.aot`;
scripts[`start.nativescript.${options.name}.android`] = `cd apps/nativescript-${options.name} && tns run android --emulator --bundle --env.aot`;
scripts[`start.nativescript.${options.name}.ios`] = `cd apps/nativescript-${options.name} && tns run ios --emulator --bundle --hmr`;
scripts[`start.nativescript.${options.name}.android`] = `cd apps/nativescript-${options.name} && tns run android --emulator --bundle --hmr`;
scripts[`clean.nativescript.${options.name}`] = `cd apps/nativescript-${options.name} && npx rimraf -- hooks node_modules platforms package-lock.json && npm i && npx rimraf -- package-lock.json`;
return updatePackageScripts(tree, scripts);
},
Expand Down
5 changes: 5 additions & 0 deletions src/migrations/migrations.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@
"version": "6.2.0",
"description": "Update {N} webpack",
"factory": "./update-6-2-0/update-6-2-0"
},
"update-to-7.0.0": {
"version": "7.0.0",
"description": "Update {N} 5.0",
"factory": "./update-7-0-0/update-7-0-0"
}
}
}
107 changes: 107 additions & 0 deletions src/migrations/update-7-0-0/update-7-0-0.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import {
chain,
Rule,
SchematicContext,
Tree
} from "@angular-devkit/schematics";
import { join } from 'path';
import * as fs from 'fs';

import { getJsonFromFile, updateJsonFile, createOrUpdate, updateJsonInTree } from '../../utils';

function updateNativeScriptApps(tree: Tree, context: SchematicContext) {
const appsDir = tree.getDir("apps");
const appFolders = appsDir.subdirs;
const cwd = process.cwd();
const webpackConfigPath = join(cwd, 'node_modules/@nstudio/schematics/src/app.nativescript/_files/webpack.config.js');
// console.log('webpackConfigPath:', webpackConfigPath);
const webpackConfig = fs.readFileSync(webpackConfigPath, 'UTF-8');
// console.log('webpackConfig:',webpackConfig);
const mainPath = join(cwd, 'node_modules/@nstudio/schematics/src/app.nativescript/_files/app/main.ts');
// console.log('webpackConfigPath:', webpackConfigPath);
const mainFile = fs.readFileSync(mainPath, 'UTF-8');

// update {N} apps and configs
for (const dir of appFolders) {
// console.log(dir);
if (dir.indexOf("nativescript-") === 0) {
const appDir = `${appsDir.path}/${dir}`;
// console.log('appDir:', appDir);

createOrUpdate(
tree,
`${appDir}/webpack.config.js`,
webpackConfig
);

createOrUpdate(
tree,
`${appDir}/app/main.ts`,
mainFile
);

// update {N} app deps
const packagePath = `${appDir}/package.json`

const packageJson = getJsonFromFile(tree, packagePath);

if (packageJson) {

packageJson.dependencies = packageJson.dependencies || {};
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies = {
...packageJson.devDependencies,
"@angular/compiler-cli": "~7.0.0",
"@ngtools/webpack": "~7.0.0",
"nativescript-dev-webpack": "~0.18.0"
};

// console.log('path:',path);
// console.log('packageJson overwrite:', JSON.stringify(packageJson));
tree = updateJsonFile(tree, packagePath, packageJson);
}
}
}
return tree;
}

function updateRootPackage(tree: Tree, context: SchematicContext) {
return updateJsonInTree("package.json", json => {
json.scripts = json.scripts || {};
json.dependencies = json.dependencies || {};
json.dependencies = {
...json.dependencies,
"@ngx-translate/core": "~11.0.0",
"@ngx-translate/http-loader": "~4.0.0",
"nativescript-angular": "~7.0.0",
"tns-core-modules": "~5.0.0"
}
json.devDependencies = json.devDependencies || {};
json.devDependencies = {
...json.devDependencies,
"tns-platform-declarations": "~5.0.0"
}

const appsDir = tree.getDir("apps");
const appFolders = appsDir.subdirs;

for (const dir of appFolders) {
if (dir.indexOf("nativescript-") === 0) {
const parts = dir.split("-");
const appName = parts[1];
json.scripts[
`start.nativescript.${appName}.ios`
] = `cd apps/${dir} && tns run ios --emulator --bundle --hmr`;
json.scripts[
`start.nativescript.${appName}.android`
] = `cd apps/${dir} && tns run android --emulator --bundle --hmr`;
}
}

return json;
})(tree, context);
}

export default function(): Rule {
return chain([updateNativeScriptApps, updateRootPackage]);
}
14 changes: 7 additions & 7 deletions src/utils/general.ts
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,14 @@ export function addRootDeps(

let dep: NodeDependency = {
name: "@ngx-translate/core",
version: "~10.0.1",
version: "~11.0.0",
type: "dependency"
};
deps.push(dep);

dep = {
name: "@ngx-translate/http-loader",
version: "~3.0.1",
version: "~4.0.0",
type: "dependency"
};
deps.push(dep);
Expand All @@ -205,7 +205,7 @@ export function addRootDeps(
if (targetPlatforms.nativescript) {
dep = {
name: "nativescript-angular",
version: "~6.1.0",
version: "~7.0.0",
type: "dependency"
};
deps.push(dep);
Expand All @@ -228,21 +228,21 @@ export function addRootDeps(
// remove in future
dep = {
name: "rxjs-compat",
version: "^6.2.2",
version: "~6.3.3",
type: "dependency"
};
deps.push(dep);

dep = {
name: "tns-core-modules",
version: "~4.2.0",
version: "~5.0.0",
type: "dependency"
};
deps.push(dep);

dep = {
name: "tns-platform-declarations",
version: "~4.2.0",
version: "~5.0.0",
type: "devDependency"
};
deps.push(dep);
Expand Down Expand Up @@ -459,7 +459,7 @@ export function updatePackageForNgrx(
if (!packageJson.dependencies["@nrwl/nx"]) {
dep = {
name: "@nrwl/nx",
version: "~6.1.0",
version: "~7.0.0",
type: "dependency"
};
deps.push(dep);
Expand Down

0 comments on commit d072e19

Please sign in to comment.