@raisenow/tamaro-cli 1.0.5 → 1.0.9

package/src/lib/helpers.ts

@@ -1,13 +1,15 @@
-import {basename, resolve} from 'path'
+import {basename, relative, resolve} from 'path'
 import {existsSync, realpathSync} from 'fs'
 import chalk from 'chalk'
-import {notify as nodeNotify} from 'node-notifier'
+import notifier from 'node-notifier'
 import {getIfUtils, IfUtils, IfUtilsFn} from 'webpack-config-utils'
 import columnify from 'columnify'
 import boxen from 'boxen'
-import dotenvExpand from 'dotenv-expand'
-import dotenv from 'dotenv'
+import {expand as dotenvExpand} from 'dotenv-expand'
+import {config as dotenvConfig} from 'dotenv'
+import open from 'open'
 import stripIndent from 'strip-indent'
+import {commandSync, ExecaSyncReturnValue, SyncOptions} from 'execa'
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -21,11 +23,8 @@ export type EnvVars = {
 // Supported packages
 ///////////////////////////////////////////////////////////////////////////////
 
-const TAMARO_CORE_PACKAGE_NAMES = ['@raisenow/tamaro-core', 'demo-tamaro-core']
-const TAMARO_CONFIGURATIONS_PACKAGE_NAMES = [
-  '@raisenow/tamaro-configurations',
-  'demo-tamaro-configurations',
-]
+const TAMARO_CORE_PACKAGE_NAMES = ['@raisenow/tamaro-core']
+const TAMARO_CONFIGURATIONS_PACKAGE_NAMES = ['@raisenow/tamaro-configurations']
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -51,9 +50,8 @@ export const getIfCoreFns = (): IfUtils => {
     }
   }
 
-  console.error(
-    chalk.red(
-      stripIndent(`\
+  logError(
+    stripIndent(`\
       You must run "npx @raisenow/tamaro-cli" commands from:
       1. Root of "${chalk.bold(TAMARO_CORE_PACKAGE_NAMES[0])}" package folder.
       2. Root of particular customer configuration folder of "${chalk.bold(
@@ -61,9 +59,8 @@ export const getIfCoreFns = (): IfUtils => {
       )}" package.
       You are currently in "${chalk.bold(realpathSync(process.cwd()))}".
     `),
-    ),
   )
-  process.exit(0)
+  process.exit(1)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -131,6 +128,24 @@ export const getPaths = (ifCore: IfUtilsFn) => {
   )
 }
 
+///////////////////////////////////////////////////////////////////////////////
+
+type Paths = {
+  [key: string]: string | undefined
+}
+
+export const getRelativePaths = (paths: Paths): Paths => {
+  const relativePaths: Paths = {}
+
+  for (const [type, absPath] of Object.entries(paths)) {
+    if (absPath) {
+      relativePaths[type] = relative('./', absPath) || '.'
+    }
+  }
+
+  return relativePaths
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // Env vars
 ///////////////////////////////////////////////////////////////////////////////
@@ -141,7 +156,7 @@ export const getEnvVars = (
   ifCore: IfUtilsFn,
   ifLocalCore: IfUtilsFn,
 ) => {
-  dotenvExpand(dotenv.config({path: filePath}))
+  dotenvExpand(dotenvConfig({path: filePath}))
 
   process.env.NODE_ENV ??= ifMin('production', 'development')
   process.env.BABEL_ENV ??= ifMin('production', 'development')
@@ -170,7 +185,7 @@ export const getEnvVars = (
     process.env.WIDGET_UUID = getWidgetUuid()
 
     if (ifLocalCore()) {
-      process.env.CORE_URL = `http://0.0.0.0:8080/index.js`
+      process.env.CORE_URL = `http://0.0.0.0:1234/index.js`
     } else {
       let version = process.env.CORE_VERSION
       version = version ? `@${version}` : ''
@@ -231,23 +246,77 @@ export const getEnvVars = (
 // Other
 ///////////////////////////////////////////////////////////////////////////////
 
-export const logCommand = (...args: any[]): void => {
-  console.log(chalk.dim(...args))
+export const delay = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms))
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const logTitle = (title: string) => {
+  console.log(`\n${chalk.bold(title)}`)
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const logError = (message?: string) => {
+  if (message) {
+    console.log(chalk.red(message))
+  }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const fail = (message?: string) => {
+  logError(message)
+  process.exit(1)
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const logCommand = (command: string): void => {
+  console.log(chalk.dim(stripIndent(command)))
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const prepareCommand = (command: string): string => {
+  return command
+    .replace(/\n/gm, ' ')
+    .replace(/[ \t]{2,}/gm, ' ')
+    .trim()
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const runCommandSync = (
+  command: string,
+  options?: SyncOptions,
+): ExecaSyncReturnValue => {
+  return commandSync(prepareCommand(command), options)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-// Log data into console as a table
 export const logDataTable = (
   vars: {[key: string]: string | undefined},
-  title: string,
+  title?: string,
 ): void => {
-  const boxTitle = chalk.bold(`${title}:\n`)
-  const boxTable = columnify(vars, {showHeaders: false})
+  logTable(columnify(vars, {showHeaders: false}), title)
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const logTable = (text: string, title?: string): void => {
+  let out = ''
+  const boxTitle = title ? chalk.bold(`${title}`) : undefined
+
+  if (boxTitle) {
+    out += `${boxTitle}\n`
+  }
+
+  out += text
 
-  // eslint-disable-next-line no-console
   console.log(
-    boxen(`${boxTitle}\n${boxTable}`, {
+    boxen(out, {
       margin: 0,
       padding: {
         top: 0,
@@ -265,15 +334,23 @@ export const logDataTable = (
 export type NotifyArgs = {
   title: string
   message: string
+  target?: string
 }
 
 export const notify = (args: NotifyArgs): void => {
-  const {title, message} = args
+  const {title, message, target} = args
 
-  nodeNotify({
+  notifier.notify({
     title,
     message,
-    contentImage: resolveOwn('src/assets/rnw-logo.png'),
+    contentImage: 'https://assets.raisenow.io/favicon.png',
     sound: 'Funk',
+    timeout: 30,
   })
+
+  if (target) {
+    notifier.on('click', () => {
+      open(target)
+    })
+  }
 }

package/src/webpack.config.ts

@@ -1,4 +1,5 @@
 import {basename, dirname} from 'path'
+import {existsSync} from 'fs'
 import glob from 'glob'
 import {getIfUtils, removeEmpty} from 'webpack-config-utils'
 import webpack, {
@@ -8,6 +9,7 @@ import webpack, {
   ProgressPlugin,
   RuleSetUseItem,
 } from 'webpack'
+import {getPortPromise} from 'portfinder'
 import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin'
 import {CleanWebpackPlugin} from 'clean-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
@@ -26,8 +28,10 @@ import {
   getEnvVars,
   getIfCoreFns,
   getPaths,
+  getRelativePaths,
   logDataTable,
   moduleFileExtensions,
+  resolveApp,
   resolveOwn,
 } from 'lib/helpers'
 
@@ -47,8 +51,11 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
   const appHtmlFiles = glob.sync(paths.appHtml)
   const envVars = getEnvVars(paths.appEnv, ifMin, ifCore, ifLocalCore)
   const {ifHmr} = getIfUtils({hmr: process.env.HMR_ENABLED === 'true'}, ['hmr'])
+  const port = await getPortPromise({port: 1234})
+  const useTailwind =
+    ifCore() && paths.appTailwindConfig && existsSync(paths.appTailwindConfig)
 
-  logDataTable(paths, 'Paths')
+  logDataTable(getRelativePaths(paths), 'Paths')
   logDataTable(envVars.raw, 'Environment variables')
 
   const getCssLoaders = (cssOptions: any = {}): RuleSetUseItem[] => {
@@ -67,7 +74,6 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
         options: {
           sourceMap: ifNotMin(),
           importLoaders: 3,
-          esModule: false,
           ...cssOptions,
         },
       },
@@ -76,7 +82,15 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
         options: {
           postcssOptions: {
             plugins: removeEmpty([
-              ifCore([require.resolve('tailwindcss'), paths.appTailwindConfig]),
+              useTailwind
+                ? [
+                    // eslint-disable-next-line node/no-missing-require
+                    require.resolve('tailwindcss', {
+                      paths: [paths.appNodeModules],
+                    }),
+                    paths.appTailwindConfig,
+                  ]
+                : undefined,
               require.resolve('postcss-custom-properties'),
               require.resolve('autoprefixer'),
             ]),
@@ -114,7 +128,6 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
       pathinfo: false,
       filename: ifCore('index.js', 'widget.js'),
       chunkFilename: ifMin('[name]-[contenthash:16].js', '[name].js'),
-      // assetModuleFilename: ifMin('assets/[name]-[contenthash:16][ext]', 'assets/[name][ext]'),
       assetModuleFilename: 'assets/[name]-[contenthash:16][ext]',
       crossOriginLoading: 'anonymous',
       uniqueName: process.env.WEBPACK_UNIQUE_NAME,
@@ -142,151 +155,173 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
           use: require.resolve('source-map-loader'),
         }),
 
-        // Javascript and Typescript (Babel)
         {
-          test: /\.(js|ts)x?$/,
-          exclude: /node_modules/,
-          loader: require.resolve('babel-loader'),
-          options: {
-            babelrc: false,
-            configFile: false,
-            sourceMaps: ifNotMin(),
-            inputSourceMap: ifNotMin(),
-            presets: removeEmpty([
-              require.resolve('@babel/preset-env'),
-              [
-                require.resolve('@babel/preset-typescript'),
-                {
-                  allowDeclareFields: true,
+          oneOf: [
+            // App Javascript and Typescript (Babel)
+            // and some dependencies distributed in a non-es5 formats
+            {
+              test: /\.(js|ts)x?$/,
+              include: ifCore(
+                [
+                  resolveApp('src'),
+                  resolveApp('node_modules/micromark'),
+                  resolveApp('node_modules/decode-named-character-reference'),
+                ],
+                [resolveApp('.'), resolveApp('../../src')],
+              ),
+
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                sourceMaps: ifNotMin(),
+                inputSourceMap: ifNotMin(),
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  [
+                    require.resolve('@babel/preset-typescript'),
+                    {
+                      allowDeclareFields: true,
+                    },
+                  ],
+                  require.resolve('@babel/preset-react'),
+                ],
+                plugins: removeEmpty([
+                  [
+                    require.resolve('@babel/plugin-transform-runtime'),
+                    {
+                      corejs: {
+                        version: 3,
+                        proposals: true,
+                      },
+                      absoluteRuntime: dirname(
+                        require.resolve('@babel/runtime-corejs3/package.json'),
+                      ),
+                    },
+                  ],
+                  [
+                    require.resolve('@babel/plugin-proposal-decorators'),
+                    {
+                      legacy: true,
+                    },
+                  ],
+                  require.resolve('@babel/plugin-syntax-dynamic-import'),
+                  require.resolve('babel-plugin-lodash'),
+                  ifHmr(require.resolve('react-refresh/babel')),
+                ]),
+              },
+            },
+
+            // Other Javascript (not in app) - no transformation
+            {
+              test: /\.(js|mjs)$/,
+            },
+
+            // Styles (not modules)
+            {
+              test: /\.s?css$/,
+              exclude: /\.module\.s?css$/,
+              use: getCssLoaders({
+                modules: false,
+              }),
+            },
+
+            // Styles (modules)
+            {
+              test: /\.module\.s?css$/,
+              use: getCssLoaders({
+                modules: {localIdentName: '[local]__[hash:base64]'},
+              }),
+            },
+
+            // SVG (in HTML and styles)
+            {
+              test: /\.svg$/,
+              issuer: [/\.html$/, /\.s?css$/],
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
                 },
-              ],
-              require.resolve('@babel/preset-react'),
-            ]),
-            plugins: removeEmpty([
-              [
-                require.resolve('@babel/plugin-transform-runtime'),
+              },
+            },
+
+            // SVG (in components)
+            {
+              test: /\.svg$/,
+              issuer: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              use: [
                 {
-                  corejs: {
-                    version: 3,
-                    proposals: true,
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    svgoConfig: {
+                      plugins: [
+                        {
+                          removeHiddenElems: false,
+                          moveGroupAttrsToElems: false,
+                          collapseGroups: false,
+                        },
+                      ],
+                    },
+                    prettier: false,
+                    titleProp: true,
+                    ref: true,
                   },
-                  absoluteRuntime: dirname(
-                    require.resolve('@babel/runtime-corejs3/package.json'),
-                  ),
                 },
-              ],
-              [
-                require.resolve('@babel/plugin-proposal-decorators'),
                 {
-                  legacy: true,
+                  loader: require.resolve('url-loader'),
+                  options: {
+                    name: 'assets/[name]-[contenthash:16].[ext]',
+                    limit: imageInlineSizeLimit,
+                  },
                 },
               ],
-              require.resolve('@babel/plugin-syntax-dynamic-import'),
-              require.resolve('babel-plugin-lodash'),
-              ifHmr(require.resolve('react-refresh/babel')),
-            ]),
-          },
-        },
-
-        // Styles (not modules)
-        {
-          test: /\.s?css$/,
-          exclude: /\.module\.s?css$/,
-          use: getCssLoaders({
-            modules: false,
-          }),
-        },
-
-        // Styles (modules)
-        {
-          test: /\.module\.s?css$/,
-          use: getCssLoaders({
-            modules: {localIdentName: '[local]__[hash:base64]'},
-          }),
-        },
-
-        // SVG (in HTML)
-        {
-          test: /\.svg$/,
-          issuer: /\.html$/,
-          type: 'asset',
-          parser: {
-            dataUrlCondition: {
-              maxSize: imageInlineSizeLimit,
             },
-          },
-        },
 
-        // SVG (in components)
-        {
-          test: /\.svg$/,
-          issuer: {
-            not: [/\.html$/],
-          },
-          use: [
+            // Images and fonts
             {
-              loader: require.resolve('@svgr/webpack'),
-              options: {
-                svgoConfig: {
-                  plugins: [
-                    {
-                      removeHiddenElems: false,
-                      moveGroupAttrsToElems: false,
-                      collapseGroups: false,
-                    },
-                  ],
+              test: /\.(png|jpe?g|webp|gif|ico|ttf|eot|woff2?)$/,
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
                 },
               },
             },
+
+            // YML
             {
-              loader: require.resolve('url-loader'),
+              test: /\.ya?ml$/,
+              use: [
+                {loader: require.resolve('json-loader')},
+                {loader: require.resolve('yaml-loader')},
+              ],
+            },
+
+            // HTML
+            {
+              test: /\.html$/,
+              loader: require.resolve('html-loader'),
               options: {
-                // name: ifMin(
-                //   'assets/[name]-[contenthash:16].[ext]',
-                //   'assets/[name].[ext]'
-                // ),
-                name: 'assets/[name]-[contenthash:16].[ext]',
-                limit: imageInlineSizeLimit,
+                minimize: false,
               },
             },
-          ],
-        },
 
-        // Images and fonts
-        {
-          test: /\.(png|jpe?g|webp|gif|ico|ttf|eot|woff2?)$/,
-          type: 'asset',
-          parser: {
-            dataUrlCondition: {
-              maxSize: imageInlineSizeLimit,
+            // All other files - fallback
+            // This must be the latest rule!
+            {
+              exclude: [/^$/, /\.(js|jsx|ts|tsx|mjs)$/, /\.html$/, /\.json$/],
+              type: 'asset/resource',
             },
-          },
-        },
-
-        // YML
-        {
-          test: /\.ya?ml$/,
-          use: [
-            {loader: require.resolve('json-loader')},
-            {loader: require.resolve('yaml-loader')},
           ],
         },
-
-        // HTML
-        {
-          test: /\.html$/,
-          loader: require.resolve('html-loader'),
-          options: {
-            esModule: false,
-            minimize: false,
-          },
-        },
       ]),
     },
 
     devtool: ifMin(false, 'cheap-module-source-map'),
 
     devServer: {
+      port,
       static: false,
       historyApiFallback: {
         disableDotRule: true,

package/src/commands/build/index.ts

@@ -1,41 +0,0 @@
-import {commandSync} from 'execa'
-import {logCommand, notify, resolveOwn} from 'lib/helpers'
-import resolveBin from 'resolve-bin'
-
-///////////////////////////////////////////////////////////////////////////////
-
-export type BuildOptions = {
-  analyze?: boolean
-  deploy?: boolean
-  latest?: boolean
-  tag?: string
-  serve?: boolean
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-const prepareBuildFlags = (options: BuildOptions): string => {
-  const {analyze} = options
-  let flags: string[] = []
-
-  flags = analyze ? [...flags, '--env analyze'] : flags
-
-  return flags.join(' ')
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-export const build = async (options: BuildOptions): Promise<void> => {
-  const flags = prepareBuildFlags(options)
-
-  const wpBin = resolveBin.sync('webpack')
-  const wpConfig = resolveOwn('dist/webpack.config.js')
-  const cmd = `${wpBin} --config ${wpConfig} --env min ${flags}`
-  logCommand(cmd)
-  commandSync(cmd, {stdio: 'inherit'})
-
-  notify({
-    title: '"build" command',
-    message: 'Process is done',
-  })
-}

package/src/commands/deploy/index.ts

@@ -1,25 +0,0 @@
-import {commandSync} from 'execa'
-import {getIfCoreFns, getPaths, logCommand} from 'lib/helpers'
-
-///////////////////////////////////////////////////////////////////////////////
-
-export type DeployOptions = {
-  latest?: boolean
-  tag?: string
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const deploy = async (options: DeployOptions): Promise<void> => {
-  // todo: ensure build exists
-  // todo: handle "tag" and "latest" options
-  // todo: implement
-  const {ifCore} = getIfCoreFns()
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const paths = getPaths(ifCore)
-
-  const cmd = `echo Deploying to AWS is not implemented yet`
-  logCommand(cmd)
-  commandSync(cmd, {stdio: 'inherit'})
-}