Configure @liferay/npm-scripts

Author: rafoli

modules/remote-web-component-admin-web/bnd.bnd

@@ -3,8 +3,8 @@ Bundle-SymbolicName: com.liferay.remote.web.component.admin.web
 Bundle-Version: 1.0.4
 Export-Package: com.liferay.remote.web.component.admin.web.configuration
 Import-Package: \
-	com.liferay.portal.kernel.util;version="[8.0.0,10.0.0)",\
+	com.liferay.portal.kernel.util;version="[9.21.0,10.0.0)",\
 	*
-Liferay-JS-Resources-Top-Head: /index.js
+Liferay-JS-Resources-Top-Head: /remote-web-component-admin-web.js?t6
 Liferay-Top-Head-Weight: 1000
 Web-ContextPath: /remote-web-component-admin-web

modules/remote-web-component-admin-web/package-lock.json

@@ -1,26 +1,15 @@
 {
-  "name": "redux-micro-frontend-bundle",
+  "name": "remote-web-component-admin-web",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "js/index.js",
   "license": "MIT",
   "dependencies": {
     "redux-micro-frontend": "^1.0.1"
   },
   "devDependencies": {
-    "liferay-npm-bundler": "^2.18.2",
-    "liferay-npm-build-support": "^2.18.2",
-    "copy-webpack-plugin": "4.6.0",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1",
-    "babel-cli": "6.26.0",
-    "babel-preset-env": "1.7.0",
-    "babel-loader": "7.1.5"
+    "@liferay/npm-scripts": "^36.11.0"
   },
   "scripts": {
-    "build": "babel --source-maps -d build src && npm run copy-assets && liferay-npm-bundler",
-    "copy-assets": "lnbs-copy-assets",
-    "deploy": "npm run build && lnbs-deploy",
-    "start": "lnbs-start"
+    "build": "liferay-npm-scripts build"
   }
 }

modules/remote-web-component-admin-web/package.json

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
+import { GlobalStore } from 'redux-micro-frontend';
+
+declare global {
+    interface Window { GlobalStore: any; }
+}
+
+window.GlobalStore = window.GlobalStore || GlobalStore;

modules/remote-web-component-admin-web/src/main/resources/META-INF/resources/js/index.ts

@@ -12,6 +12,10 @@
  * details.
  */
 
-import {GlobalStore} from 'redux-micro-frontend';
-
-global.GlobalStore = GlobalStore;
+type JSONValue =
+	| boolean
+	| null
+	| number
+	| string
+	| {[property: string]: JSONValue}
+	| Array<JSONValue>;

modules/remote-web-component-admin-web/src/main/resources/META-INF/resources/index.js renamed to modules/remote-web-component-admin-web/src/main/resources/META-INF/resources/js/types/index.d.ts

@@ -0,0 +1,15 @@
+{
+	"compilerOptions": {
+		"module": "es6",
+		"outDir": "./build/node/packageRunBuild/dist/",
+		"sourceMap": true,
+		"strict": true,
+		"target": "es5",
+        "moduleResolution": "node", 
+		"typeRoots": [
+			"../../../node_modules/@types",
+			"./node_modules/@types",
+			"./src/main/resources/META-INF/resources/js/types"
+		]
+	}
+}

modules/remote-web-component-admin-web/tsconfig.json

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
+const config = require('./webpack.config');
+
+module.exports = {
+	...config,
+	devServer: {
+		port: 3000,
+		proxy: {
+			'**': 'http://0.0.0.0:8080',
+		},
+		publicPath: config.output.publicPath,
+	},
+	devtool: 'inline-source-map',
+	mode: 'development',
+};

modules/remote-web-component-admin-web/webpack.config.dev.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
+const path = require('path');
+
+const PUBLIC_PATH = '/o/remote-web-component-admin-web/';
+
+module.exports = {
+	context: path.resolve(__dirname),
+	devtool: 'source-map',
+	entry: './src/main/resources/META-INF/resources/js/index.ts',
+	mode: 'production',
+	module: {
+		rules: [
+			{
+				test: /\.ts?$/,
+				use: 'ts-loader',
+			},
+		],
+	},
+	output: {
+		filename: 'remote-web-component-admin-web.js',
+		libraryTarget: 'window',
+		path: path.resolve('./build/resources/main/META-INF/resources/'),
+		publicPath: PUBLIC_PATH,
+	},
+	resolve: {
+		extensions: ['.js', '.ts'],
+	},
+};