feat(admin): init project (#7197)

tools/cli/package.json

@@ -16,6 +16,7 @@
     "@sentry/webpack-plugin": "^2.16.1",
     "@types/webpack-env": "^1.18.4",
     "@vanilla-extract/webpack-plugin": "^2.3.7",
+    "autoprefixer": "^10.4.19",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "cssnano": "^7.0.0",
@@ -24,11 +25,13 @@
     "lodash-es": "^4.17.21",
     "mime-types": "^2.1.35",
     "mini-css-extract-plugin": "^2.8.1",
+    "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "raw-loader": "^4.0.2",
     "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
+    "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5.3.10",
     "thread-loader": "^4.0.2",
     "ts-node": "^10.9.2",

tools/cli/src/bin/build.ts

@@ -1,14 +1,10 @@
-import path from 'node:path';
-
 import webpack from 'webpack';
 
+import { getCwdFromDistribution } from '../config/cwd.cjs';
 import type { BuildFlags } from '../config/index.js';
-import { projectRoot } from '../config/index.js';
 import { buildI18N } from '../util/i18n.js';
 import { createWebpackConfig } from '../webpack/webpack.config.js';
 
-let cwd: string;
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const buildType = process.env.BUILD_TYPE_OVERRIDE || process.env.BUILD_TYPE;
 
@@ -37,24 +33,14 @@ let entry: string | undefined;
 
 const { DISTRIBUTION } = process.env;
 
-const getDistribution = () => {
-  switch (DISTRIBUTION) {
-    case 'browser':
-    case undefined:
-      cwd = path.join(projectRoot, 'packages/frontend/web');
-      return 'browser';
-    case 'desktop':
-      cwd = path.join(projectRoot, 'packages/frontend/electron/renderer');
-      entry = path.join(cwd, 'index.tsx');
-      return DISTRIBUTION;
-    default: {
-      throw new Error('DISTRIBUTION must be one of browser, desktop');
-    }
-  }
-};
+const cwd = getCwdFromDistribution(DISTRIBUTION);
+
+if (DISTRIBUTION === 'desktop') {
+  entry = './index.tsx';
+}
 
 const flags = {
-  distribution: getDistribution(),
+  distribution: DISTRIBUTION as BuildFlags['distribution'],
   mode: 'production',
   channel: getChannel(),
   coverage: process.env.COVERAGE === 'true',

tools/cli/src/bin/dev.ts

@@ -6,8 +6,8 @@ import { config } from 'dotenv';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 
+import { getCwdFromDistribution, projectRoot } from '../config/cwd.cjs';
 import type { BuildFlags } from '../config/index.js';
-import { projectRoot } from '../config/index.js';
 import { watchI18N } from '../util/i18n.js';
 import { createWebpackConfig } from '../webpack/webpack.config.js';
 
@@ -46,6 +46,9 @@ const buildFlags = process.argv.includes('--static')
               {
                 value: 'desktop',
               },
+              {
+                value: 'admin',
+              },
             ],
             initialValue: 'browser',
           }),
@@ -103,13 +106,12 @@ flags.channel = buildFlags.channel;
 flags.coverage = buildFlags.coverage;
 flags.entry = undefined;
 
-const cwd =
-  flags.distribution === 'browser'
-    ? join(projectRoot, 'packages', 'frontend', 'web')
-    : join(projectRoot, 'packages', 'frontend', 'electron');
+const cwd = getCwdFromDistribution(flags.distribution);
+
+process.env.DISTRIBUTION = flags.distribution;
 
 if (flags.distribution === 'desktop') {
-  flags.entry = join(cwd, 'renderer', 'index.tsx');
+  flags.entry = join(cwd, 'index.tsx');
 }
 
 if (buildFlags.debugBlockSuite) {

tools/cli/src/config/cwd.cjs

@@ -0,0 +1,30 @@
+// @ts-check
+
+const { join } = require('node:path');
+
+const projectRoot = join(__dirname, '../../../..');
+
+module.exports.projectRoot = projectRoot;
+
+/**
+ *
+ * @param {string | undefined} distribution
+ * @returns string
+ */
+module.exports.getCwdFromDistribution = function getCwdFromDistribution(
+  distribution
+) {
+  switch (distribution) {
+    case 'browser':
+    case undefined:
+    case null:
+      return join(projectRoot, 'packages/frontend/web');
+    case 'desktop':
+      return join(projectRoot, 'packages/frontend/electron/renderer');
+    case 'admin':
+      return join(projectRoot, 'packages/frontend/admin');
+    default: {
+      throw new Error('DISTRIBUTION must be one of browser, desktop');
+    }
+  }
+};

tools/cli/src/config/index.ts

@@ -1,14 +1,8 @@
-import { fileURLToPath } from 'node:url';
-
 export type BuildFlags = {
-  distribution: 'browser' | 'desktop';
+  distribution: 'browser' | 'desktop' | 'admin';
   mode: 'development' | 'production';
   channel: 'stable' | 'beta' | 'canary' | 'internal';
   coverage?: boolean;
   localBlockSuite?: string;
   entry?: string;
 };
-
-export const projectRoot = fileURLToPath(
-  new URL('../../../../', import.meta.url)
-);

tools/cli/src/util/i18n.ts

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 
 import { runCli } from '@magic-works/i18n-codegen';
 
-import { projectRoot } from '../config/index.js';
+import { projectRoot } from '../config/cwd.cjs';
 
 const configPath = resolve(projectRoot, '.i18n-codegen.json');
 

tools/cli/src/util/infra.ts

@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
 
 import { build } from 'vite';
 
-import { projectRoot } from '../config/index.js';
+import { projectRoot } from '../config/cwd.cjs';
 
 const infraFilePath = resolve(
   projectRoot,

tools/cli/src/webpack/config.ts

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module';
-import { join, resolve } from 'node:path';
+import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import type { RuntimeConfig } from '@affine/env/global';
@@ -14,8 +14,8 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
 
+import { projectRoot } from '../config/cwd.cjs';
 import type { BuildFlags } from '../config/index.js';
-import { projectRoot } from '../config/index.js';
 import { productionCacheGroups } from './cache-group.js';
 import { WebpackS3Plugin } from './s3-plugin.js';
 
@@ -312,11 +312,7 @@ export const createConfiguration: (
                   loader: 'postcss-loader',
                   options: {
                     postcssOptions: {
-                      config: resolve(
-                        rootPath,
-                        'webpack',
-                        'postcss.config.cjs'
-                      ),
+                      config: join(rootPath, 'webpack', 'postcss.config.cjs'),
                     },
                   },
                 },
@@ -355,15 +351,23 @@ export const createConfiguration: (
         ),
         runtimeConfig: JSON.stringify(runtimeConfig),
       }),
-      new CopyPlugin({
-        patterns: [
-          {
-            // copy the shared public assets into dist
-            from: join(workspaceRoot, 'packages', 'frontend', 'core', 'public'),
-            to: join(cwd, 'dist'),
-          },
-        ],
-      }),
+      buildFlags.distribution === 'admin'
+        ? null
+        : new CopyPlugin({
+            patterns: [
+              {
+                // copy the shared public assets into dist
+                from: join(
+                  workspaceRoot,
+                  'packages',
+                  'frontend',
+                  'core',
+                  'public'
+                ),
+                to: join(cwd, 'dist'),
+              },
+            ],
+          }),
       buildFlags.mode === 'production' && process.env.R2_SECRET_ACCESS_KEY
         ? new WebpackS3Plugin()
         : null,

tools/cli/src/webpack/postcss.config.cjs

@@ -1,4 +1,27 @@
+const { join } = require('node:path');
+
 const cssnano = require('cssnano');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const { getCwdFromDistribution } = require('../config/cwd.cjs');
+
+const projectCwd = getCwdFromDistribution(process.env.DISTRIBUTION);
+
+const twConfig = (function () {
+  try {
+    const config = require(`${projectCwd}/tailwind.config.js`);
+    const { content } = config;
+    if (Array.isArray(content)) {
+      config.content = content.map(c =>
+        c.startsWith(projectCwd) ? c : join(projectCwd, c)
+      );
+    }
+    return config;
+  } catch {
+    return null;
+  }
+})();
 
 module.exports = function (context) {
   const plugins = [
@@ -12,6 +35,10 @@ module.exports = function (context) {
     }),
   ];
 
+  if (twConfig) {
+    plugins.push(tailwindcss(twConfig), autoprefixer());
+  }
+
   return {
     from: context.from,
     plugins,

tools/cli/src/webpack/webpack.config.ts

@@ -35,7 +35,7 @@ export function createWebpackConfig(cwd: string, flags: BuildFlags) {
   const config = createConfiguration(cwd, flags, runtimeConfig);
   return merge(config, {
     entry: {
-      app: flags.entry ?? resolve(cwd, 'src/index.tsx'),
+      [flags.distribution]: flags.entry ?? resolve(cwd, 'src/index.tsx'),
     },
     plugins: [
       new HTMLPlugin({
@@ -43,7 +43,7 @@ export function createWebpackConfig(cwd: string, flags: BuildFlags) {
         inject: 'body',
         scriptLoading: 'module',
         minify: false,
-        chunks: ['app'],
+        chunks: 'all',
         filename: 'index.html',
         templateParameters: {
           GIT_SHORT_SHA: gitShortHash(),

tools/cli/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "composite": true,
+    "allowJs": true,
     "module": "ESNext",
     "moduleResolution": "Node",
     "outDir": "lib"