nitro-web 0.0.1 → 0.0.3

package/webpack.config.js

@@ -7,7 +7,7 @@ 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 ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
 import tailwindcss from 'tailwindcss'
 import webpack from 'webpack'
 import ESLintPlugin from 'eslint-webpack-plugin'
@@ -15,31 +15,27 @@ import postcssImport from 'postcss-import'
 import postcssNested from 'postcss-nested'
 import postcssFor from 'postcss-for'
 import { createRequire } from 'module'
-import postcssImportResolver from 'postcss-import-resolver'
-const _require = createRequire(import.meta.url)
+import { getDirectories } from './util.js'
 
-export function getWebpackConfig(config) {
-  // Configurables
-  const { clientDir, componentsDir, distDir, isNitro, nitroDir } = config
-  const imgsDir = path.join(clientDir, 'imgs/')
-  const fontsDir = path.join(clientDir, 'fonts/')
-  const build = process.env.NODE_ENV == 'production'
+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'
 
-  const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
+axiosRetry(axios, {
+  retries: 10,
+  retryDelay: () => 150,
+  retryCondition: (e) =>  e.code == 'ECONNREFUSED',
+})
 
-  axiosRetry(axios, {
-    retries: 10,
-    retryDelay: () => 150,
-    retryCondition: (e) =>  e.code == 'ECONNREFUSED',
-  })
+// process.traceDeprecation = true
+export const getConfig = (config) => {
+  const { clientDir, componentsDir, distDir, imgsDir, fontsDir } = getDirectories(path, config.pwd)
 
-  // process.traceDeprecation = true
-  // eslint-disable-next-line
   return (env, argv) => [{
-    devtool: build ? false : 'source-map',
+    devtool: isBuild ? false : 'source-map',
     entry: clientDir + 'index.ts',
-    // entry: build ? './client/index.tsx' : ['webpack-plugin-serve/client', './client/index.tsx'], // check this
-    mode: build ? 'production' : 'development',
+    // 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
@@ -94,17 +90,18 @@ export function getWebpackConfig(config) {
             { loader: 'postcss-loader', options: {
               postcssOptions: {
                 plugins: [
-                  !isNitro ? 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'),
-                      },
-                    }),
-                  }),
+                  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: `./${isNitro ? '_example/' : ''}tailwind.config.js` }), 
+                  tailwindcss({ config: path.resolve(config.pwd, 'tailwind.config.js') }), 
                   autoprefixer,
                 ],
               },
@@ -119,6 +116,7 @@ export function getWebpackConfig(config) {
               // 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: [
@@ -127,19 +125,25 @@ export function getWebpackConfig(config) {
               options: {
                 presets: [
                   ['@babel/preset-env', { debug: false }],
-                  ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }],
                   ['@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
+                  // 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/webpack-emotion-typescript
-                  'babel-plugin-macros',
-                  !build && _require.resolve('react-refresh/babel'),
+                  // 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),
               },
             },
@@ -231,7 +235,7 @@ export function getWebpackConfig(config) {
       // 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]${build ? '.[contenthash]' : ''}.js`,
+      filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.js`,
       path: distDir,
       publicPath: '/',
     },
@@ -249,7 +253,7 @@ export function getWebpackConfig(config) {
           },
         },
       },
-      minimize: build,
+      minimize: isBuild,
     },
     plugins: [
       // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)(),
@@ -270,10 +274,10 @@ export function getWebpackConfig(config) {
         extensions: ['js', 'mjs', 'jsx'],
         exclude: ['node_modules'],
       }),
-      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${build ? '.[contenthash]' : ''}.css` }),
+      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.css` }),
       new HtmlWebpackPlugin({ template: clientDir + 'index.html', filename: distDir + 'index.html' }),
       new CleanTerminalPlugin({ skipFirstRun: true }),
-      !build && new ReactRefreshWebpackPlugin({ overlay: false }),
+      // !isBuild && new ReactRefreshWebpackPlugin({ overlay: false }),
     ].filter(Boolean),
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
@@ -281,8 +285,6 @@ export function getWebpackConfig(config) {
       alias: {
         // required for auto-importing page components into nitro app.js router
         'componentsDir': componentsDir,
-        // needed only for only the example app. There are also css aliases above in postcss plugins
-        'nitro-web': isNitro ? path.resolve(nitroDir, 'client.js') : undefined,
       },
     },
     stats: {
@@ -298,5 +300,4 @@ export function getWebpackConfig(config) {
       ignored: new RegExp(`(${componentsDir}.*\\.api\\.js$|node_modules/(?!cherry))`),
     },
   }]
-
-}
+}

package/_example/types.d.ts

@@ -1,7 +0,0 @@
-declare module '*.svg' {
-  const content: string | React.FC<React.SVGProps<SVGElement>>
-  export default content
-}
-declare global {
-  const sharedStore: any
-}

package/client.js

@@ -1,42 +0,0 @@
-export * from './client/app.js'
-export * from './util.js'
-export * as util from './util.js'
-
-// Components: Pages
-export { Signin } from './components/auth/signin.jsx'
-export { Signup } from './components/auth/signup.jsx'
-export { ResetInstructions, ResetPassword } from './components/auth/reset.jsx'
-// export { SettingsAccount } from './components/settings/settings-account.jsx'
-// export { SettingsBusiness } from './components/settings/settings-business.jsx'
-// export { SettingsTeamMember } from './components/settings/settings-team--member.jsx'
-// export { SettingsTeam } from './components/settings/settings-team.jsx'
-
-// Components: partials: elements
-export { Accordion } from './components/partials/element/accordion.jsx'
-export { Avatar } from './components/partials/element/avatar.jsx'
-export { Button } from './components/partials/element/button.jsx'
-export { Dropdown } from './components/partials/element/dropdown.jsx'
-export { Initials } from './components/partials/element/initials.jsx'
-export { Message } from './components/partials/element/message.jsx'
-// export { Modal } from './components/partials/element/modal.jsx'
-export { Sidebar } from './components/partials/element/sidebar.jsx'
-export { Tooltip } from './components/partials/element/tooltip.jsx'
-export { Topbar } from './components/partials/element/topbar.jsx'
-
-// Components: partials: form
-export { Checkbox } from './components/partials/form/checkbox.jsx'
-export { Drop } from './components/partials/form/drop.jsx'
-export { FormError } from './components/partials/form/form-error.jsx'
-export { Input } from './components/partials/form/input.jsx'
-export { Location } from './components/partials/form/location.jsx'
-export { Select } from './components/partials/form/select.jsx'
-export { Toggle } from './components/partials/form/toggle.jsx'
-
-// Components: partials: layouts
-export { Layout1 } from './components/partials/layout/layout1.jsx'
-export { Layout2 } from './components/partials/layout/layout2.jsx'
-
-// Components: partials: other
-export { IsFirstRender } from './components/partials/is-first-render.js'
-export { NotFound } from './components/partials/not-found.jsx'
-export { Styleguide } from './components/partials/styleguide.jsx'

package/server.js

@@ -1,20 +0,0 @@
-// Export models
-import userModel from './server/models/user.js'
-import companyModel from './server/models/company.js'
-async function setupDefaultModels(db) {
-  // Load default nitro models, if they don't exist already
-  if (!db.models.user) await db.model('user', userModel)
-  if (!db.models.company) await db.model('company', companyModel)
-}
-export { userModel, companyModel, setupDefaultModels }
-
-// Export router
-export { setupRouter } from './server/router.js'
-
-// Export email util
-export { sendEmail } from './server/email/index.js'
-
-// Export api default controllers
-export { default as auth } from './components/auth/auth.api.js'
-export { default as settings } from './components/settings/settings.api.js'
-export { default as stripe } from './components/billing/stripe.api.js'