separate builds for server and client

apps/app/src/server/crowi/index.js

@@ -3,7 +3,7 @@ import http from 'http';
 import path from 'path';
 
 import { createTerminus } from '@godaddy/terminus';
-import lsxRoutes from '@growi/remark-lsx/dist/server/routes';
+import lsxRoutes from '@growi/remark-lsx/dist/server';
 import mongoose from 'mongoose';
 import next from 'next';
 

apps/app/src/services/renderer/renderer.tsx

@@ -4,8 +4,8 @@ import type { ComponentType } from 'react';
 import { isClient } from '@growi/core';
 import * as drawioPlugin from '@growi/remark-drawio';
 import growiDirective from '@growi/remark-growi-directive';
-import { Lsx, LsxImmutable } from '@growi/remark-lsx/dist/components';
-import * as lsxGrowiPlugin from '@growi/remark-lsx/dist/services/renderer';
+// eslint-disable-next-line import/extensions
+import * as lsxGrowiPlugin from '@growi/remark-lsx/dist/client/index.mjs';
 import type { Schema as SanitizeOption } from 'hast-util-sanitize';
 import type { SpecialComponents } from 'react-markdown/lib/ast-to-react';
 import type { NormalComponents } from 'react-markdown/lib/complex-types';
@@ -197,7 +197,7 @@ export const generateViewOptions = (
     components.h1 = Header;
     components.h2 = Header;
     components.h3 = Header;
-    components.lsx = Lsx;
+    components.lsx = lsxGrowiPlugin.Lsx;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
   }
@@ -290,7 +290,7 @@ export const generateSimpleViewOptions = (
 
   // add components
   if (components != null) {
-    components.lsx = LsxImmutable;
+    components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
     components.table = Table;
   }
@@ -357,7 +357,7 @@ export const generateSSRViewOptions = (
 
   // add components
   if (components != null) {
-    components.lsx = LsxImmutable;
+    components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.table = Table;
   }
 
@@ -408,7 +408,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
 
   // add components
   if (components != null) {
-    components.lsx = LsxImmutable;
+    components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
     components.table = Table;
   }

packages/remark-lsx/package.json

@@ -4,17 +4,19 @@
   "description": "GROWI plugin to list pages",
   "license": "MIT",
   "keywords": ["growi", "growi-plugin"],
-  "main": "dist/index.js",
   "types": "types/index.d.ts",
   "files": [
     "dist",
     "types"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "run-p build:*",
+    "build:client": "vite build -c vite.client.config.ts",
+    "build:server": "vite build -c vite.server.config.ts",
     "clean": "npx -y shx rm -rf dist",
-    "dev": "vite build --mode dev",
-    "watch": "yarn dev -w",
+    "dev": "run-p dev:*",
+    "dev:client": "vite build -c vite.client.config.ts --mode dev",
+    "dev:server": "vite build -c vite.server.config.ts --mode dev",
     "lint:js": "eslint **/*.{js,jsx,ts,tsx}",
     "lint:styles": "stylelint --allow-empty-input src/**/*.scss src/**/*.css",
     "lint": "run-p lint:*"

packages/remark-lsx/src/client/index.ts

@@ -0,0 +1,2 @@
+export * from '../components';
+export * from '../services/renderer';

packages/remark-lsx/src/server/routes/index.ts → packages/remark-lsx/src/server/index.ts

@@ -1,4 +1,4 @@
-import { routesFactory } from './lsx';
+import { routesFactory } from './routes/lsx';
 
 const loginRequiredFallback = (req, res) => {
   return res.status(403).send('login required');

packages/remark-lsx/vite.client.config.ts

@@ -0,0 +1,36 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({ outputDir: 'types' }),
+  ],
+  build: {
+    outDir: 'dist/client',
+    lib: {
+      entry: {
+        index: 'src/client/index.ts',
+      },
+      name: 'remark-lsx-libs',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        'assert',
+        'axios',
+        'http-errors',
+        'is-absolute-url',
+        'react',
+        'next/link',
+        'unified',
+        'swr',
+        /^hast-.*/,
+        /^unist-.*/,
+        /^@growi\/.*/,
+      ],
+    },
+  },
+});

packages/remark-lsx/vite.config.ts → packages/remark-lsx/vite.server.config.ts

@@ -1,28 +1,24 @@
-import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    react(),
     dts({ outputDir: 'types' }),
   ],
   build: {
-    outDir: 'dist',
+    outDir: 'dist/server',
     lib: {
       entry: [
-        'src/components/index.ts',
-        'src/server/routes/index.ts',
-        'src/services/renderer/index.ts',
+        'src/server/index.ts',
       ],
       name: 'remark-lsx-libs',
-      formats: ['es', 'cjs'],
+      formats: ['cjs'],
     },
     rollupOptions: {
       output: {
         preserveModules: true,
-        preserveModulesRoot: 'src',
+        preserveModulesRoot: 'src/server',
       },
       external: [
         'axios',

turbo.json

@@ -6,7 +6,7 @@
       "outputs": ["dist/**", "types/**"]
     },
     "@growi/remark-lsx#build": {
-      "dependsOn": ["@growi/remark-growi-directive#build", "@growi/ui#build"],
+      "dependsOn": ["@growi/core#build", "@growi/remark-growi-directive#build", "@growi/ui#build"],
       "outputs": ["dist/**", "types/**"]
     },
     "@growi/app#build": {