@blocklet/pages-kit-block-studio 0.0.5 → 0.0.7

package/lib/cjs/block-studio/generate-wrapper-code.js

@@ -44,7 +44,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateWrapperCode = generateWrapperCode;
 function generateWrapperCode(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ project, state, version }) {
+    return __awaiter(this, arguments, void 0, function* ({ project, version }) {
         const projectName = (project.name || project.id).toLowerCase().replaceAll(/[^a-z0-9]/g, '_');
         const packageName = `@pages-kit-project/${projectName}`;
         const packageJson = JSON.stringify({
@@ -57,6 +57,7 @@ function generateWrapperCode(_a) {
                 '@blocklet/pages-kit-runtime': 'latest',
                 '@blocklet/pages-kit-inner-components': 'latest',
                 '@blocklet/pages-kit': 'latest',
+                '@blocklet/uploader-server': 'latest',
             },
             exports: {
                 '.': {
@@ -69,37 +70,152 @@ function generateWrapperCode(_a) {
                     import: './client.js',
                     types: './client.d.ts',
                 },
+                './middleware': {
+                    require: './middleware.cjs',
+                    import: './middleware.js',
+                    types: './middleware.d.ts',
+                },
             },
         }, null, 2);
         const index = `\
-import { ProjectRuntime } from '@blocklet/pages-kit-runtime/client';
-export * from '@blocklet/pages-kit-runtime/client';
+import HomeComponent from '@blocklet/pages-kit-runtime/client';
+
+export default HomeComponent;
+`;
+        const client = index;
+        const middleware = `
+import { initResourceRouter } from '@blocklet/pages-kit-block-studio/block-studio/init-resource-router';
+import { getPreloadComponents } from '@blocklet/pages-kit-inner-components/components';
+import { initPackResourceStates } from '@blocklet/pages-kit-inner-components/site-state';
+import { Router } from 'express';
 
-window.__PAGE_STATE__ = ${JSON.stringify(state, null, 2)};
-window.__PROJECT_ID__ = "${project.id}";
+const { initProxyToMediaKitUploadsMiddleware, initStaticResourceMiddleware } = require('@blocklet/uploader-server');
 
 
-const initProjectRuntime = new ProjectRuntime({
-  state: window.__PAGE_STATE__,
-  projectId: window.__PROJECT_ID__,
+const router = Router();
+
+router.use('/api/resources', initResourceRouter);
+
+let tempStates: any[] = [];
+let allResourcesComponents: any[] = [];
+
+initPackResourceStates(({ states }: any) => {
+  allResourcesComponents = states.reduce((acc, { state }) => {
+    if (state.components) {
+      return { ...acc, ...state.components };
+    }
+    return acc;
+  }, {});
+  tempStates = states;
 });
 
-export default initProjectRuntime;
+router.get('/api/pages', (req, res) => {
+  const { did } = req.query;
+
+  if (!did) {
+    return res.status(400).json({ message: 'did is required' });
+  }
+
+  const data = tempStates.find((state) => state.did === did);
+
+  res.json(data);
+});
+
+router.post('/api/components/preload', async (req, res) => {
+  const { mode, module, instances: inputInstances, locale } = req.body;
+
+  // Find state by matching component IDs with tempStates
+  const state = tempStates.find((s) =>
+    inputInstances.some((instance) => {
+      return s.state.components && Object.keys(s.state.components).includes(instance.component.id);
+    }),
+  )?.state;
+
+  const instances = inputInstances.map((instance) => {
+    const component = allResourcesComponents[instance.component.id].data;
+
+    if (!component) return null;
+
+    return {
+      id: instance.id,
+      componentId: component.id,
+      properties: instance.properties,
+      useCache: instance.useCache,
+      cacheDuration: instance.cacheDuration,
+    };
+  });
+
+  if (!state) {
+    return res.status(400).json({ message: 'state not found' });
+  }
+
+  const result = await getPreloadComponents({
+    mode,
+    req,
+    state: state,
+    locale: locale,
+    module: module,
+    instances: instances,
+  });
+
+  res.json(result);
+});
+
+
+router.use(
+  '/uploads',
+  // initProxyToMediaKitUploadsMiddleware({
+  //   express,
+  // }),
+  initStaticResourceMiddleware({
+    express,
+    resourceTypes: [
+      // image bin resource
+      {
+        type: 'imgpack',
+        did: 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9',
+      },
+      // pages kit resource (pages and components folder)
+      {
+        type: 'page',
+        did: 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o',
+        folder: ['pages', 'components'],
+        blacklist: ['.yml'],
+      },
+    ],
+  }),
+  (_req, res) => {
+    res.status(404).send('404 NOT FOUND').end();
+  },
+);
+
+export default router;
 `;
-        const client = index;
         const tsFiles = [
             { fileName: 'index.ts', content: index },
             { fileName: 'client.ts', content: client },
+            { fileName: 'middleware.ts', content: middleware },
         ];
         const ts = yield Promise.resolve().then(() => __importStar(require('typescript')));
+        const compilerOptions = {
+            jsx: ts.JsxEmit.React,
+            esModuleInterop: true,
+            skipLibCheck: true,
+            declaration: true,
+        };
         const result = (yield Promise.all(tsFiles.map((_a) => __awaiter(this, [_a], void 0, function* ({ fileName, content }) {
             const cjs = ts.transpileModule(content, {
                 fileName,
-                compilerOptions: { module: ts.ModuleKind.CommonJS },
+                compilerOptions: Object.assign(Object.assign({}, compilerOptions), { module: ts.ModuleKind.CommonJS }),
             });
             const esm = ts.transpileModule(content, {
                 fileName,
-                compilerOptions: { module: ts.ModuleKind.ESNext },
+                compilerOptions: Object.assign(Object.assign({}, compilerOptions), { module: ts.ModuleKind.ESNext }),
+            });
+            // Generate proper type declarations
+            const dts = ts.transpileModule(content, {
+                fileName,
+                compilerOptions: Object.assign(Object.assign({}, compilerOptions), { declaration: true, emitDeclarationOnly: true }),
             });
             return [
                 {
@@ -112,7 +228,7 @@ export default initProjectRuntime;
                 },
                 {
                     fileName: fileName.replace(/\.ts$/, '.d.ts'),
-                    content,
+                    content: dts.outputText || content, // Fallback to original content if declaration fails
                 },
             ];
         })))).flat();

package/lib/cjs/block-studio/init-resource-router.js

@@ -101,7 +101,7 @@ const getExportDir = (projectId, releaseId) => {
     return dir;
 };
 exports.initResourceRouter = (0, express_1.Router)();
-exports.initResourceRouter.get('/resources', (_req, res) => __awaiter(void 0, void 0, void 0, function* () {
+exports.initResourceRouter.get('/', (_req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const resources = [];
     const rootDir = process.cwd();
     const files = (0, utils_1.findComponentFiles)({ cwd: rootDir });
@@ -130,7 +130,7 @@ exports.initResourceRouter.get('/resources', (_req, res) => __awaiter(void 0, vo
         ],
     });
 }));
-exports.initResourceRouter.post('/resources', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+exports.initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const { resources, projectId, releaseId } = req.body;
     // ignore all tag
     const componentIds = resources.filter((resource) => resource.id !== allTag);

package/lib/cjs/block-studio/plugins/vite-plugin-block-studio.js

@@ -57,7 +57,7 @@ function initBlockStudioPlugins(options) {
     (0, utils_1.setBlockEntryFilesPattern)(entryFilesPattern);
     // fallback to __dirname if _theme.tsx not exists
     const pagesDir = (0, fs_1.existsSync)(path.join(workingDir, '_theme.tsx')) ? workingDir : __dirname.replace('cjs', 'esm');
-    utils_1.logger.log('initBlockStudioPlugins options', {
+    utils_1.logger.log('initBlockStudioPlugins options: ', {
         cwd: workingDir,
         entryFilesPattern: (0, utils_1.getBlockEntryFilesPattern)(),
         pagesDir,
@@ -90,9 +90,7 @@ function initBlockStudioPlugins(options) {
                     const multiMode = !!process.argv.includes('--multi');
                     const name = yield Promise.resolve(`${`${workingDir}/package.json`}`).then(s => __importStar(require(s))).then((res) => res.name).catch(() => 'MyLib');
                     return {
-                        build: {
-                            cssCodeSplit: false,
-                            lib: {
+                        build: Object.assign({ cssCodeSplit: false, lib: {
                                 name,
                                 entry: Object.assign({}, Object.fromEntries((0, utils_1.findComponentFiles)({ cwd: workingDir })
                                     .map((entry) => {
@@ -109,40 +107,41 @@ function initBlockStudioPlugins(options) {
                                 // multiMode not support umd
                                 formats: ['es', multiMode ? 'umd' : 'cjs'],
                                 fileName: (format, entryName) => `${format}/${entryName}.js`,
-                            },
-                            rollupOptions: {
+                            }, rollupOptions: {
                                 external: [
                                     'react',
                                     'react-router-dom',
                                     'react-dom',
+                                    'react-is',
+                                    'react/jsx-runtime',
                                     'crypto',
-                                    '@emotion/react',
-                                    '@emotion/styled',
+                                    // '@emotion/react',
+                                    // '@emotion/styled',
                                     '@arcblock/ux',
-                                    /^@mui\/.*/, // 所有 MUI 相关包
-                                    '@mui/material/styles', // 明确指定这个路径
+                                    '@arcblock/did-connect',
                                 ],
                                 output: {
                                     // 为所有外部依赖提供全局变量
                                     globals: {
                                         react: 'React',
                                         'react-dom': 'ReactDOM',
+                                        'react-is': 'ReactIs',
                                         'react-router-dom': 'ReactRouterDOM',
-                                        '@emotion/react': 'emotionReact',
-                                        '@emotion/styled': 'emotionStyled',
+                                        'react/jsx-runtime': 'ReactJsxRuntime',
+                                        // '@emotion/react': 'emotionReact',
+                                        // '@emotion/styled': 'emotionStyled',
                                         '@mui/material': 'MUI',
                                         '@arcblock/ux': 'ArcBlockUX',
+                                        '@arcblock/did-connect': 'ArcBlockDidConnect',
                                     },
                                     paths: {
                                     // Redirect 'react' imports to '@blocklet/pages-kit/builtin/react'
                                     // react: '@blocklet/pages-kit/builtin/react',
                                     },
                                     // 确保正确处理命名导出和默认导出
-                                    interop: 'auto',
-                                    preserveModules: true, // 保持模块结构
+                                    // interop: 'auto',
                                 },
-                            },
-                        },
+                            } }, _config === null || _config === void 0 ? void 0 : _config.build),
                     };
                 });
             },