POC for exporting components.

.eslintrc.json

@@ -46,6 +46,7 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "import/no-anonymous-default-export": "off",
+    "import/no-named-as-default": "off",
     "@next/next/no-img-element": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",

.gitignore

@@ -17,6 +17,7 @@ node_modules
 /build
 /public/script.js
 /geo
+/dist
 
 # misc
 .DS_Store

components/index.ts

@@ -0,0 +1,2 @@
+export * from 'components/pages/settings/teams/TeamAddForm';
+export * from 'components/pages/settings/teams/TeamAddWebsiteForm';

package.json

@@ -9,6 +9,15 @@
     "type": "git",
     "url": "https://github.com/umami-software/umami.git"
   },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "next dev -p 3000",
     "build": "npm-run-all build-db check-db build-tracker build-geo build-app",
@@ -113,12 +122,18 @@
   "devDependencies": {
     "@formatjs/cli": "^4.2.29",
     "@netlify/plugin-nextjs": "^4.27.3",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^4.0.0",
+    "@svgr/rollup": "^7.0.0",
     "@svgr/webpack": "^6.2.1",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.17.17",
     "eslint": "^8.33.0",
     "eslint-config-next": "^12.2.4",
     "eslint-config-prettier": "^8.5.0",
@@ -137,6 +152,11 @@
     "prisma": "4.13.0",
     "prompts": "2.4.2",
     "rollup": "^2.70.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-node-externals": "^5.1.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^14.16.1",
     "stylelint-config-css-modules": "^4.1.0",

postcss.config.js

@@ -1,17 +1,17 @@
+const flexBugs = require('postcss-flexbugs-fixes');
+const presetEnv = require('postcss-preset-env');
+
 module.exports = {
   plugins: [
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
+    flexBugs,
+    presetEnv({
+      autoprefixer: {
+        flexbox: 'no-2009',
       },
-    ],
+      stage: 3,
+      features: {
+        'custom-properties': false,
+      },
+    }),
   ],
 };

rollup.components.config.js

@@ -0,0 +1,90 @@
+import path from 'path';
+import crypto from 'crypto';
+import resolve from '@rollup/plugin-node-resolve';
+import alias from '@rollup/plugin-alias';
+import postcss from 'rollup-plugin-postcss';
+import del from 'rollup-plugin-delete';
+import esbuild from 'rollup-plugin-esbuild';
+import dts from 'rollup-plugin-dts';
+import svgr from '@svgr/rollup';
+import externals from 'rollup-plugin-node-externals';
+import json from '@rollup/plugin-json';
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex');
+
+const aliases = [
+  { find: /^components/, replacement: path.resolve('./components') },
+  { find: /^hooks/, replacement: path.resolve('./hooks') },
+  { find: /^assets/, replacement: path.resolve('./assets') },
+  { find: /^lib/, replacement: path.resolve('./lib') },
+  { find: /^store/, replacement: path.resolve('./store') },
+  { find: /^public/, replacement: path.resolve('./public') },
+];
+
+const aliasResolver = resolve({
+  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+});
+
+const jsBundle = {
+  input: 'components/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    del({ targets: 'dist/*', runOnce: true }),
+    postcss({
+      extract: 'styles.css',
+      sourceMap: true,
+      minimize: true,
+      modules: {
+        generateScopedName: function (name, filename, css) {
+          const file = path.basename(filename, '.css').replace('.module', '');
+          const hash = Buffer.from(md5(`${name}:${filename}:${css}`))
+            .toString('base64')
+            .substring(0, 5);
+
+          return `${file}-${name}--${hash}`;
+        },
+      },
+    }),
+    svgr({ icon: true }),
+    externals(),
+    alias({
+      entries: aliases,
+      customResolver: aliasResolver,
+    }),
+    json(),
+    esbuild({
+      loaders: {
+        '.js': 'jsx',
+      },
+    }),
+  ],
+};
+
+const dtsBundle = {
+  input: 'components/index.ts',
+  output: {
+    file: 'dist/index.d.ts',
+    format: 'es',
+  },
+  plugins: [
+    alias({
+      entries: aliases,
+      customResolver: aliasResolver,
+    }),
+    externals(),
+    dts(),
+  ],
+};
+
+export default [jsBundle, dtsBundle];

tsconfig.json

@@ -1,28 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "outDir": "./build",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "incremental": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "esModuleInterop": true,
     "noImplicitAny": false,
     "preserveConstEnums": true,
     "removeComments": true,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "strict": true,
+    "outDir": "dist/types",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
     "baseUrl": ".",
-    "strictNullChecks": false,
-    "noEmit": true,
-    "jsx": "preserve"
+    "paths": { "*": ["./*"] }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }