Merge pull request #738 from izaera/IFI-2718

feat: migrate shared bundle generation to @liferay/cli

Author: izaera

projects/js-toolkit/packages/liferay-cli/src/new/facet-angular/index.ts

@@ -15,15 +15,18 @@ import {
 import dependencies from '../../dependencies.json';
 import ensureOutputFile from '../../util/ensureOutputFile';
 
-import type {Facet, Options} from '../index';
+import type {Options} from '../index';
+import type {LiferayTargetFacet} from '../target-liferay';
 
 const {
 	PkgJson: {addDependencies},
 	Text: {appendLines},
 } = TRANSFORM_OPERATIONS;
 const {info, print} = format;
 
-const facet: Facet = {
+const facet: LiferayTargetFacet = {
+	isPortlet: true,
+
 	async prompt(useDefaults: boolean, options: Options): Promise<Options> {
 		return options;
 	},

projects/js-toolkit/packages/liferay-cli/src/new/facet-plain-js/index.ts

@@ -13,14 +13,17 @@ import {
 
 import ensureOutputFile from '../../util/ensureOutputFile';
 
-import type {Facet, Options} from '../index';
+import type {Options} from '../index';
+import type {LiferayTargetFacet} from '../target-liferay';
 
 const {
 	Text: {appendLines},
 } = TRANSFORM_OPERATIONS;
 const {info, print} = format;
 
-const facet: Facet = {
+const facet: LiferayTargetFacet = {
+	isPortlet: true,
+
 	async prompt(useDefaults: boolean, options: Options): Promise<Options> {
 		return options;
 	},

projects/js-toolkit/packages/liferay-cli/src/new/facet-react/index.ts

@@ -15,15 +15,18 @@ import {
 import dependencies from '../../dependencies.json';
 import ensureOutputFile from '../../util/ensureOutputFile';
 
-import type {Facet, Options} from '../index';
+import type {Options} from '../index';
+import type {LiferayTargetFacet} from '../target-liferay';
 
 const {
 	PkgJson: {addDependencies},
 	Text: {appendLines},
 } = TRANSFORM_OPERATIONS;
 const {info, print} = format;
 
-const facet: Facet = {
+const facet: LiferayTargetFacet = {
+	isPortlet: true,
+
 	async prompt(useDefaults: boolean, options: Options): Promise<Options> {
 		return options;
 	},

projects/js-toolkit/packages/liferay-cli/src/new/facet-shared-bundle/index.ts

@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: © 2017 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: LGPL-3.0-or-later
+ */
+
+import {FilePath, TemplateRenderer, format} from '@liferay/js-toolkit-core';
+
+import prompt from '../../util/prompt';
+
+import type {Options} from '../index';
+import type {LiferayTargetFacet} from '../target-liferay';
+
+const {info, print} = format;
+
+const facet: LiferayTargetFacet = {
+	isPortlet: false,
+
+	async prompt(useDefaults: boolean, options: Options): Promise<Options> {
+		return await prompt(useDefaults, options, [
+			{
+				default: false,
+				message:
+					'Does your shared bundle need an initializer?\n' +
+					'\n' +
+					'  💡 This is usually needed in frameworks which need a single point of\n' +
+					'     initialization.\n' +
+					'  💡 It may also be useful if you need to load any polyfill that must be\n' +
+					'     loaded just once.\n' +
+					'\n',
+				name: 'createInitializer',
+				type: 'confirm',
+			},
+		]);
+	},
+
+	async render(options: Options): Promise<void> {
+		if (!options['createInitializer']) {
+			return;
+		}
+
+		print(info`Generating initializer...`);
+
+		const renderer = new TemplateRenderer(
+			new FilePath(__dirname).join('templates'),
+			options.outputPath
+		);
+
+		print(info`  Configuring Babel`);
+
+		await renderer.render('.babelrc', options);
+
+		print(info`  Creating initializer`);
+
+		await renderer.render('src/index.js', options);
+	},
+};
+
+export default facet;

projects/js-toolkit/packages/liferay-cli/src/new/facet-shared-bundle/templates/.babelrc.ejs

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

projects/js-toolkit/packages/liferay-cli/src/new/facet-shared-bundle/templates/src/index.js.ejs

@@ -0,0 +1,10 @@
+/**
+ * Place any initialization of this shared bundle in this file. That way, you
+ * can run:
+ *
+ * 		require('<%= name %>');
+ *
+ * in your dependent projects, before using this shared bundle and you will make
+ * sure that this code is executed once.
+ */
+

projects/js-toolkit/packages/liferay-cli/src/new/facet-vuejs/index.ts

@@ -15,15 +15,18 @@ import {
 import dependencies from '../../dependencies.json';
 import ensureOutputFile from '../../util/ensureOutputFile';
 
-import type {Facet, Options} from '../index';
+import type {Options} from '../index';
+import type {LiferayTargetFacet} from '../target-liferay';
 
 const {
 	PkgJson: {addDependencies},
 	Text: {appendLines},
 } = TRANSFORM_OPERATIONS;
 const {info, print} = format;
 
-const facet: Facet = {
+const facet: LiferayTargetFacet = {
+	isPortlet: true,
+
 	async prompt(useDefaults: boolean, options: Options): Promise<Options> {
 		return options;
 	},

projects/js-toolkit/packages/liferay-cli/src/new/target-liferay/index.ts

@@ -22,19 +22,25 @@ import facetProject from '../facet-project';
 import facetReact from '../facet-react';
 import facetSampleConfiguration from '../facet-sample-configuration';
 import facetSampleStyles from '../facet-sample-styles';
+import facetSharedBundle from '../facet-shared-bundle';
 import facetVuejs from '../facet-vuejs';
 
-import type {Options, Target} from '..';
+import type {Facet, Options, Target} from '..';
+
+export interface LiferayTargetFacet extends Facet {
+	isPortlet: boolean;
+}
 
 const {
 	PkgJson: {addDependencies},
 } = TRANSFORM_OPERATIONS;
 const {info, print} = format;
 
-const frameworkFacets = {
+const projectTypeFacets: {[name: string]: LiferayTargetFacet} = {
 	'Angular': facetAngular,
 	'Plain JavaScript': facetPlainJs,
 	'React': facetReact,
+	'Shared bundle': facetSharedBundle,
 	'Vue.js': facetVuejs,
 };
 const platforms = dependencies['target-liferay']['platforms'];
@@ -55,28 +61,40 @@ const target: Target = {
 				type: 'list',
 			},
 			{
-				choices: Object.keys(frameworkFacets),
+				choices: Object.keys(projectTypeFacets),
 				default: 'React',
-				defaultDescription: 'Using framework: {React}',
-				message: 'Which will be your application framework?',
-				name: 'framework',
+				defaultDescription: 'Using project type: {React}',
+				message: 'Which will be your project type?',
+				name: 'projectType',
 				type: 'list',
 			},
 		]);
 
-		options = await facetLocalization.prompt(true, options);
-		options = await facetConfiguration.prompt(true, options);
-		options = await facetPortlet.prompt(useDefaults, options);
+		const projectTypeFacet =
+			projectTypeFacets[options.projectType as string];
+
+		options = await facetLocalization.prompt(
+			useDefaults || projectTypeFacet.isPortlet,
+			options
+		);
+		options = await facetConfiguration.prompt(
+			useDefaults || projectTypeFacet.isPortlet,
+			options
+		);
+
+		if (projectTypeFacet.isPortlet) {
+			options = await facetPortlet.prompt(useDefaults, options);
+		}
 
-		const frameworkFacet = frameworkFacets[options.framework as string];
+		options = await facetBuildable.prompt(true, options);
+		options = await projectTypeFacet.prompt(useDefaults, options);
 
-		if (frameworkFacet) {
-			options = await facetBuildable.prompt(true, options);
-			options = await frameworkFacet.prompt(useDefaults, options);
+		if (projectTypeFacet.isPortlet) {
 			options = await facetSampleStyles.prompt(true, options);
-			options = await facetSampleConfiguration.prompt(true, options);
 		}
 
+		options = await facetSampleConfiguration.prompt(true, options);
+
 		return options;
 	},
 
@@ -99,18 +117,24 @@ const target: Target = {
 			})
 		);
 
+		const projectTypeFacet =
+			projectTypeFacets[options.projectType as string];
+
 		await facetLocalization.render(options);
 		await facetConfiguration.render(options);
-		await facetPortlet.render(options);
 
-		const frameworkFacet = frameworkFacets[options.framework as string];
+		if (projectTypeFacet.isPortlet) {
+			await facetPortlet.render(options);
+		}
 
-		if (frameworkFacet) {
-			await facetBuildable.render(options);
-			await frameworkFacet.render(options);
+		await facetBuildable.render(options);
+		await projectTypeFacet.render(options);
+
+		if (projectTypeFacet.isPortlet) {
 			await facetSampleStyles.render(options);
-			await facetSampleConfiguration.render(options);
 		}
+
+		await facetSampleConfiguration.render(options);
 	},
 };
 

projects/js-toolkit/qa/.gitignore

@@ -1,11 +1,13 @@
 /agnostic-angular-portlet
 /agnostic-plain-js-portlet
 /agnostic-react-portlet
+/agnostic-shared-bundle
 /agnostic-vuejs-portlet
 
 /master-angular-portlet
 /master-plain-js-portlet
 /master-react-portlet
+/master-shared-bundle
 /master-vuejs-portlet
 
 /angular-cli-portlet

projects/js-toolkit/scripts/qa/index.js

@@ -40,11 +40,13 @@ if (argv['generate']) {
 		'Plain JavaScript'
 	);
 	generate('agnostic-react-portlet', 'portal-agnostic', 'React');
+	generate('agnostic-shared-bundle', 'portal-agnostic', 'Shared bundle');
 	generate('agnostic-vuejs-portlet', 'portal-agnostic', 'Vue.js');
 
 	generate('master-angular-portlet', 'portal-master', 'Angular');
 	generate('master-plain-js-portlet', 'portal-master', 'Plain JavaScript');
 	generate('master-react-portlet', 'portal-master', 'React');
+	generate('master-shared-bundle', 'portal-master', 'Shared bundle');
 	generate('master-vuejs-portlet', 'portal-master', 'Vue.js');
 
 	generateAngularCli('angular-cli-portlet');