@apia/cli 4.0.14

package/README.md

@@ -0,0 +1,13 @@
+# Apia Command Line
+
+This library provides several utilities, mainly oriented to external developers consuming our development tools.
+
+## Custom components
+
+### `apia create component [component_name]` 
+
+Creates a boilerplate structure on `./components/[component_name]` providing the starting code for compiling custom components.
+
+### `apia compile component [component_name] [--watch]`: 
+
+Compiles the component, provided it's located under `./components/[component_name]`. If `--watch` is passed as argument, then the compilation is made in watch mode for development purposes.

package/cli/askQuestion.js

@@ -0,0 +1,19 @@
+const readline = require('readline');
+
+function askQuestion(question, defaultAnswer, defaultValue, useDefaults) {
+  if (useDefaults) return defaultValue;
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(`${question} [default: ${defaultAnswer}]: `, (answer) => {
+      rl.close();
+      resolve(answer || defaultValue); // Use default if no answer
+    });
+  });
+}
+
+module.exports = askQuestion;

package/cli/cli.js

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const findFileInAncestors = require('./findFileInAncestors')
+
+const logger = {
+  log(...what) {
+    console.log(...what);
+  },
+  error(error) {
+    console.error('[ERROR] ', error)
+  },
+  internalE(error) {
+    console.error('[INTERNAL ERROR] ', error)
+  },
+  warn(warn) {
+    console.warn('[WARNING] ', error)
+  },
+  info(info) {
+    console.info('[INFO] ', error)
+  },
+  success(success) {
+    console.log('[SUCCESS] ', success)
+  }
+}
+
+/**
+ * Starts webpack on the given component.
+ * 
+ * - If --watch flag is passed, run webpack in development mode.
+ */
+program
+  .version('1.0.0')
+  .command('compile')
+  .argument('<component_name>', 'The name of the component to be compiled.')
+  .description('Compiles the component into the OUT_DIR declared in the .env file.')
+  .option('--watch', 'Starts the compiler in watch mode.') // Define the '--y' option
+  .action(async (componentName, { watch }) => {
+    const parsedName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+    logger.info(`Compiling ${parsedName}`);
+    if (watch) {
+      logger.info("Watch mode enabled.")
+    }
+
+    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`;
+
+        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' });
+
+        logger.success('Build completed successfully!');
+      } else {
+        throw new Error("Cannot find OUT_DIR in " + envFile.fileName);
+      }
+    } else {
+      throw new Error("Cannot find .env file");
+    }
+  });
+
+/**
+ * Makes a component inside ./<component_name>/index.tsx
+ * 
+ * - If the component exists, warn the user and do nothing.
+ */
+program
+  .command('create')
+  .argument('<component_name>', 'The name of the component to be created.')
+  .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 sourcePath = path.resolve(__dirname, 'component_base.tsx');
+
+    if (fs.existsSync(destinationFile)) {
+      logger.error(`Already exists component with name "${parsedName}" in ${destinationFile}`);
+      process.exit(1);
+    } else {
+
+      const destinationDir = path.resolve(process.cwd(), parsedName);
+      if (!fs.existsSync(destinationDir)) {
+        fs.mkdirSync(destinationDir, { recursive: true })
+      }
+
+      if (!fs.existsSync(sourcePath)) {
+        logger.internalE(`Cannot find the template file.`);
+        process.exit(1);
+      }
+
+      // Read the content from the source file
+      const content = fs.readFileSync(sourcePath, 'utf-8').replaceAll('__COMPONENT_NAME__', parsedName);
+
+      // Write the content to the new file
+      fs.writeFileSync(destinationFile, content);
+
+      logger.success(`Plugin created at: ${destinationFile}`);
+    }
+  });
+
+
+program.parse(process.argv);

package/cli/component_base.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { Plugin } from '../Plugin';
+import { observable, makeObservable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+
+type TState = {
+  counter: number;
+};
+
+class __COMPONENT_NAME__Controller {
+  private state: TState = {
+    counter: 0,
+  };
+
+  constructor() {
+    makeObservable<__COMPONENT_NAME__Controller, 'state'>(this, {
+      state: observable,
+    });
+  }
+
+  get count() {
+    return this.state.counter;
+  }
+
+  sum() {
+    this.state.counter++;
+  }
+}
+
+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

@@ -0,0 +1,33 @@
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * Searches for the file with <fileName> in the current working directory (process.cwd()) and all its ancestors.
+ * 
+ * @returns - An object { fileName: string; content: string } if found, or undefined else.
+ */
+function findFileInAncestors(fileName) {
+  let currentDir = path.resolve(process.cwd())
+  let searchAgain = true;
+
+  do {
+    /**
+     * Searches for the .env file in the current folder and its ancestors.
+     */
+    const currentEnv = path.resolve(currentDir, fileName)
+
+    searchAgain = !fs.existsSync(currentEnv);
+    if (!searchAgain) {
+      return { fileName: currentEnv, content: fs.readFileSync(currentEnv) };
+    }
+
+    const aux = currentDir;
+    currentDir = path.resolve(currentDir, '..');
+
+    searchAgain = aux !== currentDir;
+  } while (searchAgain);
+
+  return undefined;
+}
+
+module.exports = findFileInAncestors;

package/cli/webpack.config.cjs

@@ -0,0 +1,32 @@
+const WrapperPlugin = require('wrapper-webpack-plugin');
+const path = require('path')
+
+module.exports = {
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  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),
+};

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@apia/util';
+
+declare global {
+    interface Window {
+        dispatchComponent: EventEmitter<{
+            dispatch: any;
+            ready: null;
+        }>;
+    }
+}
+declare class Plugin {
+    constructor(name: string, fc: any);
+}
+
+export { Plugin };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,10 @@
+class Plugin {
+  constructor(name, fc) {
+    window.dispatchComponent.on("ready", () => {
+      window.dispatchComponent.emit("dispatch", { name, fc });
+    });
+  }
+}
+
+export { Plugin };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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;;;;"}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@apia/cli",
+  "version": "4.0.14",
+  "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"
+  },
+  "dependencies": {
+    "@apia/util": "^4.0.14",
+    "commander": "^12.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "56fbc27ca9b878c099d501fc55c3d2b266624fbe"
+}