@apia/cli 4.0.14 → 4.0.15

package/cli/{cli.js → cli.cjs}

@@ -1,32 +1,37 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require('commander');
-const { execSync } = require('child_process');
+const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
-const findFileInAncestors = require('./findFileInAncestors')
+const findFileInAncestors = require('./findFileInAncestors.cjs')
+const chalk = require('chalk')
 
 const logger = {
   log(...what) {
     console.log(...what);
   },
   error(error) {
-    console.error('[ERROR] ', error)
+    console.error(chalk.red('[ERROR] '), error)
   },
   internalE(error) {
-    console.error('[INTERNAL ERROR] ', error)
+    console.error(chalk.red('[INTERNAL ERROR] '), error)
   },
   warn(warn) {
-    console.warn('[WARNING] ', error)
+    console.warn(chalk.yellow('[WARNING] '), warn)
   },
   info(info) {
-    console.info('[INFO] ', error)
+    console.log(chalk.blue('[INFO] '), info)
   },
   success(success) {
-    console.log('[SUCCESS] ', success)
+    console.log(chalk.green('[SUCCESS] '), success)
   }
 }
 
+function componentFolderResolver(componentName) {
+  return path.resolve(process.cwd(), 'components', componentName)
+}
+
 /**
  * Starts webpack on the given component.
  * 
@@ -47,22 +52,23 @@ program
 
     let envFile = findFileInAncestors('.env');
     if (envFile !== undefined) {
-      const outDir = envFile.content.match(/^ *OUT_DIR *= *([\n]+)\n/)?.[1];
-      if (outDir) {
-        const targetComponentIndex = path.resolve(`${process.cwd()}/${parsedName}/index.tsx`);
-        const defaultWebpackConfig = `${__dirname}/webpack.config.cjs`;
+      const outDir = envFile.content.match(/APIA_4004 *= *([^\n]+)/);
+      if (outDir?.[1]) {
+        const actualOutput = path.resolve(outDir[1], 'react', 'customComponents', parsedName)
+
+        const targetComponentIndex = path.resolve(`${componentFolderResolver(parsedName)}/index.tsx`);
+        const webpackConfig = path.resolve(__dirname, 'webpack.config.cjs');
 
         logger.info(`Building project with:
         - Entry: ${targetComponentIndex}
-        - Output: ${outDir}
-        - Webpack config: ${defaultWebpackConfig}`);
-
-        // Build with the specified inputs
-        execSync(`npx webpack --config "${webpackConfig}" --entry "${targetComponentIndex}" --output-filename "${outDir}.js" ${watch ? '--watch' : ''}`, { stdio: 'inherit' });
+        - Output: ${actualOutput}
+        - Webpack config: ${webpackConfig}`);
 
-        logger.success('Build completed successfully!');
+        spawn('npx',
+          [`webpack --config "${webpackConfig}" --entry "${targetComponentIndex}" --output-path "${actualOutput}" --output-filename="index.js" ${watch ? '--mode=development' : ''} ${watch ? '--watch' : ''}`]
+          , { shell: true, stdio: ['inherit', 'inherit', 'inherit'] });
       } else {
-        throw new Error("Cannot find OUT_DIR in " + envFile.fileName);
+        throw new Error("Cannot find APIA_4004 in " + envFile.fileName);
       }
     } else {
       throw new Error("Cannot find .env file");
@@ -80,7 +86,7 @@ program
   .description('Creates the boilerplate for the given component name.')
   .action((componentName) => {
     const parsedName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-    const destinationFile = path.resolve(process.cwd(), parsedName, 'index.tsx');
+    const destinationFile = path.resolve(componentFolderResolver(parsedName), 'index.tsx');
     const sourcePath = path.resolve(__dirname, 'component_base.tsx');
 
     if (fs.existsSync(destinationFile)) {
@@ -88,7 +94,7 @@ program
       process.exit(1);
     } else {
 
-      const destinationDir = path.resolve(process.cwd(), parsedName);
+      const destinationDir = componentFolderResolver(parsedName);
       if (!fs.existsSync(destinationDir)) {
         fs.mkdirSync(destinationDir, { recursive: true })
       }

package/cli/component_base.tsx

@@ -1,40 +1,59 @@
-import { useMemo } from 'react';
-import { Plugin } from '../Plugin';
-import { observable, makeObservable } from 'mobx';
+import { FC } from 'react';
+import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
+import { makeObservable, observable } from 'mobx';
+import { SimpleButton } from '@apia/components';
 import { observer } from 'mobx-react-lite';
 
-type TState = {
-  counter: number;
-};
-
-class __COMPONENT_NAME__Controller {
-  private state: TState = {
-    counter: 0,
+/**
+ * README:
+ * 
+ * In order to run the following component, the declarations in the Java AbstractCustomComponent must include
+ * an attribute named 'selectedPlan'.
+ * 
+ * @example
+	  \@CustomComponentAttribute(name = "selectedPlan", title = "lblPlnSel", description = "lblPlnSel")
+	  public Attribute selectedPlan;
+ */
+
+export default class __COMPONENT_NAME__ extends AbstractCustomComponent {
+  state = {
+    count: 0,
   };
 
   constructor() {
-    makeObservable<__COMPONENT_NAME__Controller, 'state'>(this, {
-      state: observable,
-    });
-  }
-
-  get count() {
-    return this.state.counter;
+    super();
+    makeObservable(this, { state: observable });
   }
 
-  sum() {
-    this.state.counter++;
-  }
+  protected Component: FC = observer(() => {
+    return (
+      <>
+        <Input
+          value={this.getIntermediateString('selectedPlan')}
+          onChange={(ev) =>
+            this.setIntermediateStringValue('selectedPlan', ev.target.value)
+          }
+          onBlur={(ev: any) => {
+            this.confirmIntermediateString('selectedPlan', ev.target.value);
+          }}
+        />
+        <SimpleButton
+          onClick={() => {
+            this.state.count++;
+          }}
+        >
+          Counter {this.state.count}
+        </SimpleButton>
+        <SimpleButton
+          onClick={() => {
+            this.state.count++;
+          }}
+        >
+          Counter {this.state.count}
+        </SimpleButton>
+      </>
+    );
+  });
 }
 
-const __COMPONENT_NAME__ = observer(() => {
-  const controller = useMemo(() => new __COMPONENT_NAME__Controller(), []);
-
-  return (
-    <button onClick={() => controller.sum()}>
-      Hello world {controller.count}
-    </button>
-  );
-});
-
 new Plugin('__COMPONENT_NAME__', __COMPONENT_NAME__);

package/cli/{findFileInAncestors.js → findFileInAncestors.cjs}

@@ -18,7 +18,7 @@ function findFileInAncestors(fileName) {
 
     searchAgain = !fs.existsSync(currentEnv);
     if (!searchAgain) {
-      return { fileName: currentEnv, content: fs.readFileSync(currentEnv) };
+      return { fileName: currentEnv, content: fs.readFileSync(currentEnv, { encoding: 'utf8' }) };
     }
 
     const aux = currentDir;

package/cli/webpack.config.cjs

@@ -1,32 +1,129 @@
+const TerserPlugin = require('terser-webpack-plugin');
 const WrapperPlugin = require('wrapper-webpack-plugin');
 const path = require('path')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = {
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
+module.exports = (_, argv) => {
+  const mode = process.env.buildmode || 'production';
+  const isDevelopment = mode === "development";
+  const analyzeBundle = false && !isDevelopment;
+
+  return {
+    cache: isDevelopment ? { type: 'memory' } : false,
+    mode: isDevelopment ? 'development' : 'production',
+    devtool: 'source-map',
+    module: {
+      rules: [
+        {
+          test: /\.(t|j)sx?$/,
+          enforce: "pre",
+          use: ["source-map-loader"],
+          exclude: /plotly.js/
+        },
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true
+              }
+            }
+          ],
+        },
+        {
+          test: /\.m?js$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+      ],
+    },
+    externals: { // See plugins.ts
+      react: 'react',
+      '@apia/components': 'apiaComponents',
+      '@apia/execution-react': 'execReact',
+      '@apia/theme': 'apiaTheme',
+      '@apia/util': 'apiaUtil',
+      mobx: 'mobx',
+      'mobx-react-lite': 'mobxReact'
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.css'],
+    },
+    plugins: [
+      new ForkTsCheckerWebpackPlugin(),
+      analyzeBundle && new BundleAnalyzerPlugin(),
+      new WrapperPlugin({
+        test: /\.(ts|js)x?$/, // only wrap output of bundle files with '.js' extension 
+        header: 'function init() {\n',
+        footer: `\n}; if(window.react) { init(); } else {throw new Error("No react") }`,
+        afterOptimizations: true,
+      })
+    ].filter(Boolean),
+    resolve: {
+      modules: ['node_modules'],
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+      symlinks: true,
+      fallback: {
+        xml2js: path.resolve('./node_modules/xml2js'),
+        zlib: false,
+        http: false,
+        https: false,
+        emitter: false,
+        path: false,
+        fs: false,
+        tty: false,
+        os: false,
+        timers: false,
+        stream: false,
+      }
+    },
+    optimization: {
+      nodeEnv: 'production',
+      minimize: !isDevelopment,
+      minimizer: [!isDevelopment && new TerserPlugin({
+        extractComments: true,
+        parallel: true,
+        minify: TerserPlugin.terserMinify,
+        terserOptions: {
+          keep_classnames: true,
+          toplevel: true,
+          compress: {
+            warnings: true,
+            drop_debugger: true,
+            pure_funcs: ['console.log', 'console.table'],
+            dead_code: true,
+          },
+          output: {},
+          sourceMap: true,
+        },
+      }),
+      ].filter(Boolean),
+      removeAvailableModules: !isDevelopment,
+    },
+    resolve: {
+      alias: {
+        config: path.resolve(__dirname, './src/config/prod.ts'),
       },
-    ],
-  },
-  externals: {
-    react: 'react'
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.css'],
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(process.cwd(), 'dist'),
-  },
-  plugins: [
-    new WrapperPlugin({
-      test: /\.js$/, // only wrap output of bundle files with '.js' extension 
-      header: 'window.addEventListener("load", () => {\n',
-      footer: '\n});'
-    })
-  ].filter(Boolean),
+      modules: ['node_modules'],
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+      symlinks: true,
+      fallback: {
+        zlib: false,
+        http: false,
+        https: false,
+        emitter: false,
+        path: false,
+        fs: false,
+        tty: false,
+        os: false,
+        timers: false,
+        stream: false,
+        xml2js: path.resolve('./node_modules/xml2js'),
+        'react-focus-lock': path.resolve('./node_modules/react-focus-lock')
+      }
+    },
+  }
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 class Plugin {
   constructor(name, fc) {
-    window.dispatchComponent.on("ready", () => {
+    window.dispatchComponent.once("ready", () => {
       window.dispatchComponent.emit("dispatch", { name, fc });
     });
   }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Plugin.ts"],"sourcesContent":["import { EventEmitter } from '@apia/util';\r\n\r\ndeclare global {\r\n  interface Window {\r\n    dispatchComponent: EventEmitter<{\r\n      dispatch: any;\r\n      ready: null;\r\n    }>;\r\n  }\r\n}\r\n\r\nexport class Plugin {\r\n  constructor(name: string, fc: any) {\r\n    window.dispatchComponent.on('ready', () => {\r\n      window.dispatchComponent.emit('dispatch', { name, fc });\r\n    });\r\n  }\r\n}\r\n"],"names":[],"mappings":"AAWO,MAAM,MAAO,CAAA;AAAA,EAClB,WAAA,CAAY,MAAc,EAAS,EAAA;AACjC,IAAO,MAAA,CAAA,iBAAA,CAAkB,EAAG,CAAA,OAAA,EAAS,MAAM;AACzC,MAAA,MAAA,CAAO,kBAAkB,IAAK,CAAA,UAAA,EAAY,EAAE,IAAA,EAAM,IAAI,CAAA;AAAA,KACvD,CAAA;AAAA;AAEL;;;;"}
+{"version":3,"file":"index.js","sources":["../src/Plugin.ts"],"sourcesContent":["import { EventEmitter } from '@apia/util';\r\n\r\ndeclare global {\r\n  interface Window {\r\n    dispatchComponent: EventEmitter<{\r\n      dispatch: any;\r\n      ready: null;\r\n    }>;\r\n  }\r\n}\r\n\r\nexport class Plugin {\r\n  constructor(name: string, fc: any) {\r\n    window.dispatchComponent.once('ready', () => {\r\n      window.dispatchComponent.emit('dispatch', { name, fc });\r\n    });\r\n  }\r\n}\r\n"],"names":[],"mappings":"AAWO,MAAM,MAAO,CAAA;AAAA,EAClB,WAAA,CAAY,MAAc,EAAS,EAAA;AACjC,IAAO,MAAA,CAAA,iBAAA,CAAkB,IAAK,CAAA,OAAA,EAAS,MAAM;AAC3C,MAAA,MAAA,CAAO,kBAAkB,IAAK,CAAA,UAAA,EAAY,EAAE,IAAA,EAAM,IAAI,CAAA;AAAA,KACvD,CAAA;AAAA;AAEL;;;;"}

package/package.json

@@ -1,27 +1,21 @@
 {
   "name": "@apia/cli",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "sideEffects": true,
   "author": "Alexis Leite <alexisleite@live.com>",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "type": "module",
-  "typings": "dist/index.d.ts",
   "bin": {
-    "apia": "./cli/cli.js"
-  },
-  "scripts": {
-    "libDev": "rollup --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts",
-    "libBuild": "rollup --config ../../config/rollup.common.mjs --environment MODE:production,ENTRY:index.ts",
-    "libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts,WATCH:true"
+    "apia": "./cli/cli.cjs"
   },
   "dependencies": {
-    "@apia/util": "^4.0.14",
+    "chalk": "^4.1.2",
     "commander": "^12.0.0"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "56fbc27ca9b878c099d501fc55c3d2b266624fbe"
+  "gitHead": "893eb39744c85737b54df181b2919a51963fcc81",
+  "devDependencies": {
+    "ts-loader": "^9.5.2"
+  }
 }