nitro-web 0.0.22 → 0.0.24

package/_example/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "downlevelIteration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "lib": ["es6", "dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": false,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": false,
-    "noImplicitThis": true,
-    "noStrictGenericChecks": false,
-    "outDir": "./dist",
-    "paths": {
-      "types": ["./types.ts"]
-    },
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "target": "es6"
-  },
-  "include": [
-    "client",
-    "components/**/*.tsx",
-    "components/**/*.ts",
-    "types"
-  ]
-}

package/_example/types.ts

@@ -1 +0,0 @@
-export type { Config, Errors, User } from 'nitro-web/types'

package/_example/webpack.config.js

@@ -1,3 +0,0 @@
-import config from './server/config.js'
-import { getConfig } from 'nitro-web/webpack.config.js'
-export default getConfig(config)

package/readme.md

@@ -1,74 +0,0 @@
-# Nitro
-
-[![NPM](https://img.shields.io/npm/v/nitro-web.svg)](https://www.npmjs.com/package/nitro-web)
-
-Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀
-
-```bash
-npm i nitro-web
-```
-
-### Install
-
-1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.22"`
-3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
-4. Run `npm i`
-
-### Usage
-
-On the client, you can import components and page-components as you would normally. See ./example for further info.
-
-```javascript
-import { SigninPage, Toggle, util } from 'nitro-web'
-```
-
-On the server, you can import the express router, default models, and controllers. See ./example for further info.
-
-```javascript
-import { setupRouter, util } from 'nitro-web/server'
-const server = await setupRouter(config)
-server.listen(3001, '0.0.0.0')
-```
-
-### Run
-
-```bash
-# Running in development (watching for changes)
-npm run dev:server # run and watch the nodemon server
-npm run dev:client # run and watch the webpack dev server
-npm run dev # or run and watch both the server and client
-
-# Building for production
-npm run build
-npm run start
-```
-
-### Nitro Development
-
-The same run commands can be used in ./ which are actually executed in ./example/ via npm workspaces (`-w` flag).
-
-If util.js is updated, you must run `npm run types` to update the types file.
-
-### Versions
-
-- Express `^4.17`
-- Monastery `~3.5.1`
-- Node `^18`
-- React `^18.3`
-- Tailwind `^3.4`
-- Webpack `^5.92`
-
-### Common packages
-
-- `pdf-to-img`
-- `pdfmake`
-- `react-chartjs-2`
-- `jest: ^29.7.0`
-- `migrate-mongo: ^10.0.0`
-- `eslint-plugin-jest: ^28.9.0`
-
-### Package notes
-
-- Added twin.macro is required as a peer dependency to ./. 
-- Added tailwindcss^3 as a peer dependency to ./ to stop tailwind^4.0.0 from being installed

package/webpack.config.js

@@ -1,356 +0,0 @@
-import axios from '@hokify/axios'
-import axiosRetry from 'axios-retry'
-import autoprefixer from 'autoprefixer'
-import CleanTerminalPlugin from 'clean-terminal-webpack-plugin'
-import { CleanWebpackPlugin } from 'clean-webpack-plugin'
-import CopyWebpackPlugin from 'copy-webpack-plugin'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import webpackNodeExternals from 'webpack-node-externals'
-import path from 'path'
-// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
-import tailwindcss from 'tailwindcss'
-import webpack from 'webpack'
-import ESLintPlugin from 'eslint-webpack-plugin'
-import postcssImport from 'postcss-import'
-import postcssNested from 'postcss-nested'
-import postcssFor from 'postcss-for'
-import { createRequire } from 'module'
-import { getDirectories } from 'nitro-web/util'
-
-const _require = createRequire(import.meta.url)
-const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
-const isBuild = process.env.NODE_ENV == 'production'
-
-axiosRetry(axios, {
-  retries: 10,
-  retryDelay: () => 150,
-  retryCondition: (e) =>  e.code == 'ECONNREFUSED',
-})
-
-// process.traceDeprecation = true
-export const getConfig = (config) => {
-  const { clientDir, componentsDir, distDir, imgsDir } = getDirectories(path, config.pwd)
-  const publicPath = getPublicPath(config.env, config.homepage, config.publicPath)
-
-  return (env, argv) => [{
-    devtool: isBuild ? false : 'source-map',
-    entry: clientDir + 'index.ts',
-    // entry: isBuild ? './client/index.tsx' : ['webpack-plugin-serve/client', './client/index.tsx'], // check this
-    mode: isBuild ? 'production' : 'development',
-    // target=node ignores node_modules
-    externals: argv.target?.[0] == 'node' ? [webpackNodeExternals()] : [],
-    // target=node  ignores builtin modules
-    target: argv.target?.[0] || 'web', 
-    devServer: {
-      // needed when connecting to the devserver through a domain
-      allowedHosts: 'all', 
-      client: {
-        logging: 'warn', // 'info'
-        overlay: true,
-      },
-      compress: false,
-      devMiddleware: {
-        writeToDisk: false,
-      },
-      historyApiFallback: true,
-      host: '0.0.0.0',
-      hot: true,
-      port: 3000,
-      proxy: {
-        '/api': {
-          logLevel: 'silent',
-          target: 'http://0.0.0.0:3001',
-          // bypass: async function (req, res, proxyOptions) {
-          //   // // wait for pong, indicating express has restarted
-          //   // // all non-asset routes are triggered (even the main page)
-          //   // // another method: https://codeburst.io/dont-use-nodemon-there-are-better-ways-fc016b50b45e
-          //   // if (!req.url.match(/^\/api\//)) return
-          //   // await axios.get('http://0.0.0.0:3001/ping')
-          // },
-        },
-        '/server/email/templates': {
-          logLevel: 'silent',
-          target: 'http://0.0.0.0:3001',
-        },
-      },
-    },
-    infrastructureLogging: {
-      level: 'info',
-      // debug: [(name) => !name.match(/webpack-dev-server/)],
-      // console: (a, b, c) => { // webpack v5.3.1
-      //   console.log(1, a, b, c)
-      // },
-    },
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          use: [
-            { loader: MiniCssExtractPlugin.loader },
-            { loader: 'css-loader', options: { sourceMap: true } },
-            { loader: 'postcss-loader', options: {
-              postcssOptions: {
-                plugins: [
-                  postcssImport,
-                  // postcssImport({ 
-                  //   resolve: postcssImportResolver({
-                  //     alias: { 
-                  //       'nitro-web/client/css/components.css': path.resolve(nitroDir, 'client/css/components.css'),
-                  //       'nitro-web/client/css/fonts.css': path.resolve(nitroDir, 'client/css/fonts.css'),
-                  //     },
-                  //   }),
-                  // }),
-                  postcssNested,
-                  postcssFor,
-                  tailwindcss({ config: path.resolve(config.pwd, 'tailwind.config.js') }), 
-                  autoprefixer,
-                ],
-              },
-              sourceMap: true,
-            }},
-          ],
-        },
-        {
-          test: /\.(m?js|jsx|ts|tsx)$/,
-          exclude: (
-            (path) => {
-              // Dont transpile node modules except for date-fns, which uses ES6
-              return path.includes('node_modules') 
-                && !path.includes('node_modules/date-fns')
-                && !path.includes('node_modules/nitro-web')
-            }
-          ),
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                presets: [
-                  ['@babel/preset-env', { debug: false }],
-                  ['@babel/preset-typescript', { allowNamespaces: true }],
-                  ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react', development: !isBuild }],
-                ],
-                plugins: [
-                  'react-html-attrs',
-                  '@babel/plugin-syntax-dynamic-import',
-                  '@babel/plugin-transform-runtime',
-                  '@emotion/babel-plugin',
-                  // Below allows us to reference tailwindcss theme variables in emotion blocks
-                  // https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md
-                  // https://medium.com/fredwong-it/emotion-tailwind-twin-macro-7fdc5f2ae5f9
-                  // https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript#complete-the-typescript-setup
-                  ['babel-plugin-macros', {
-                    'twin': {
-                      preset: 'emotion',
-                      config: path.resolve(config.pwd, 'tailwind.config.js'),
-                    },
-                  }],
-                  // 'react-refresh/babel', // !isBuild && _require.resolve('react-refresh/babel'),
-                ].filter(Boolean),
-              },
-            },
-          ],
-        },
-        {
-          // Workaround to hide emotion's pseudo console noise (bug)
-          // https://github.com/emotion-js/emotion/issues/1105#issuecomment-547247291
-          test: /node_modules\/@emotion\/cache\/(src|dist)/,
-          loader: 'string-replace-loader',
-          options: {
-            search: 'if (unsafePseudoClasses',
-            replace: 'if (false && unsafePseudoClasses',
-          },
-        },
-        {
-          test: /\.csv$/,
-          use: [
-            {
-              loader: 'csv-loader',
-              options: {
-                delimiter: ',',
-                header: true,
-                skipEmptyLines: true,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/i,
-          type: 'asset/resource',
-          generator: {
-            filename: 'assets/images/[name].[ext][query]',//[hash][ext][query]
-          },
-        },
-        {
-          test: /\.svg$/,
-          use: [
-            {
-              loader: '@svgr/webpack',
-              options: {
-                svgoConfig: {
-                  plugins: [
-                    {
-                      name: 'preset-default',
-                      params: {
-                        overrides: {
-                          removeViewBox: false,
-                          convertPathData: false,
-                          cleanupNumericValues: false,
-                          convertShapeToPath: false,
-                        },
-                      },
-                    },
-                    // 'removeDimensions', (dont need this, just use width/height={undefined} if required)
-                    // {
-                    //   name: 'addClassesToSVGElement',
-                    //   params: {
-                    //     className: (node, info) => { 
-                    //       console.log(info)
-                    //       return `svg-${info?.path?.split('.')[0]}`
-                    //     },
-                    //   },
-                    // },
-                    {
-                      // until svgr updated to svgo@4 for addClassesToSVGElement fns support
-                      name: 'add-data-id-to-svg-icons',
-                      fn: (root, _params, info) => {
-                        const { basename } = info.path.match(/.*\/(?<basename>.*)\.svg$/).groups
-                        if (root.children[0].name === 'svg') {
-                          root.children[0].attributes.className = `svg-${basename}`
-                        }
-                      },
-                    },
-                  ],
-                },
-              },
-            },
-          ],
-        },
-      ],
-    },
-    node: {
-      __filename: true,
-    },
-    output: {
-      // devtoolModuleFilenameTemplate: (info) => {
-      //   // DevTools doesn't link webpack:// sourcemap filepaths, force file://.
-      //   let path = 'file://' + encodeURI(info.absoluteResourcePath)
-      //   // React only: append ?2 to all paths so devtools can link to the CSS-in-JS
-      //   if (path.match(/\.jsx$/)) return path + '?2' 
-      //   // Vue only: fix Vue:CSS paths
-      //   else return path.replace(/(\/components\/).*?components\//, '$1')
-      // },
-      // We are outputing assets into a handy subdir to allow for easier asset cache control. We can't
-      // simply use `path` because webpack-dev-server won't work when writeFiles=false (in memory).
-      // Because of this we manually need to prefix all output filenames with `assets/`.
-      filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.js`,
-      path: distDir,
-      publicPath: publicPath,
-    },
-    performance: {
-      hints: false,
-    },
-    optimization: {
-      // Split chunks into seperate emitted assets
-      splitChunks: {
-        cacheGroups: {
-          vendor: {
-            test: /[\\/]node_modules[\\/].*\.js/,
-            name: 'vendor',
-            chunks: 'all',
-          },
-        },
-      },
-      minimize: isBuild,
-    },
-    plugins: [
-      // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)(),
-      new CleanWebpackPlugin(),
-      new CopyWebpackPlugin({
-        patterns: [
-          { from: imgsDir + 'favicon.png', to: './favicon.png' },
-          { from: imgsDir, to: './assets/imgs' },
-        ],
-      }),
-      new webpack.DefinePlugin({
-        ISDEMO: !!process.env.isDemo,
-        INJECTED: JSON.stringify({
-          ...pick(config, config.inject ? config.inject.split(' ') : []),
-        }),
-      }),
-      new ESLintPlugin({
-        extensions: ['js', 'mjs', 'jsx'],
-        exclude: ['node_modules'],
-      }),
-      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.css` }),
-      new HtmlWebpackPlugin({ template: clientDir + 'index.html', filename: distDir + 'index.html' }),
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, { PUBLIC_PATH: publicPath, NAME: config.name }),
-      new CleanTerminalPlugin({ skipFirstRun: true }),
-      // !isBuild && new ReactRefreshWebpackPlugin({ overlay: false }),
-    ].filter(Boolean),
-    resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      // fallback: { fs: false },
-      alias: {
-        // required for auto-importing page components into nitro app.js router
-        'componentsDir': componentsDir,
-      },
-    },
-    stats: {
-      all: false,
-      assets: !process.env.WEBPACK_SERVE,
-      errors: true,
-      errorDetails: true,
-      timings: !process.env.WEBPACK_SERVE,
-      warnings: true,
-    },
-    watchOptions: {
-      aggregateTimeout: 50,
-      ignored: new RegExp(`(${componentsDir}.*\\.api\\.js$|node_modules/(?!cherry))`),
-    },
-  }]
-}
-
-class InterpolateHtmlPlugin {
-  constructor(htmlWebpackPlugin, replacements) {
-    this.htmlWebpackPlugin = htmlWebpackPlugin
-    this.replacements = replacements
-  }
-  apply(compiler) {
-    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
-      this.htmlWebpackPlugin
-        .getHooks(compilation)
-        .afterTemplateExecution.tap('InterpolateHtmlPlugin', data => {
-          // Run HTML through a series of user-specified string replacements.
-          for (const key in this.replacements) {
-            const value = this.replacements[key]
-            data.html = data.html.replace(
-              new RegExp('{' + key + '}', 'g'),
-              value
-            )
-          }
-        })
-    })
-  }
-}
-
-function getPublicPath(env, homepage, publicPath) {
-  /**
-   * Returns public path used for webapck (we can't use relative paths)
-   * @param {string} env - 'development', 'staging', 'production'
-   * @param {string} publicPath - proces.env.publicPath
-   * @param {string} homepage - package.json homepage
-   */
-  if (publicPath) {
-    const publicPathObj = new URL(publicPath, 'https://domain.com')
-    return publicPathObj.pathname
-
-  } else if (homepage) {
-    const homepageObj = new URL(homepage, 'https://domain.com')
-    if (env === 'development') return '/'
-    else return homepageObj.pathname
-
-  } else {
-    return '/'
-  }
-}