dumi 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/assetParsers/block.d.ts

@@ -0,0 +1,17 @@
+import type { ExampleBlockAsset } from 'dumi-assets-types';
+export interface IParsedBlockAsset {
+    asset: ExampleBlockAsset;
+    sources: Record<string, string>;
+    frontmatter: ReturnType<typeof parseCodeFrontmatter>['frontmatter'];
+}
+declare function parseCodeFrontmatter(raw: string): {
+    code: string;
+    frontmatter: Record<string, any> | null;
+};
+declare function parseBlockAsset(opts: {
+    fileAbsPath: string;
+    id: string;
+    refAtomIds: string[];
+    entryPointCode?: string;
+}): Promise<IParsedBlockAsset>;
+export default parseBlockAsset;

package/dist/assetParsers/block.js

@@ -0,0 +1,130 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/assetParsers/block.ts
+var block_exports = {};
+__export(block_exports, {
+  default: () => block_default
+});
+module.exports = __toCommonJS(block_exports);
+var import_esbuild = require("@umijs/bundler-utils/compiled/esbuild");
+var import_fs = __toESM(require("fs"));
+var import_js_yaml = __toESM(require("js-yaml"));
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
+function parseCodeFrontmatter(raw) {
+  const [, comment = "", code = ""] = raw.replace(/^\n\s*/, "").match(/^(\/\*\*[^]*?\n\s*\*\/)?(?:\s|\n)*([^]+)?$/);
+  const yamlComment = comment.replace(/^\/|\/$/g, "").replace(/(^|\n)\s*\*+/g, "$1");
+  let frontmatter = null;
+  try {
+    frontmatter = import_js_yaml.default.load(yamlComment);
+  } catch {
+  }
+  return { code: frontmatter ? code : raw, frontmatter };
+}
+async function parseBlockAsset(opts) {
+  const asset = {
+    type: "BLOCK",
+    id: opts.id,
+    refAtomIds: opts.refAtomIds,
+    dependencies: {}
+  };
+  const result = {
+    asset,
+    sources: {},
+    frontmatter: {}
+  };
+  await (0, import_esbuild.build)({
+    write: false,
+    bundle: true,
+    logLevel: "silent",
+    format: "esm",
+    target: "esnext",
+    entryPoints: [import_path.default.basename(opts.fileAbsPath)],
+    absWorkingDir: import_path.default.dirname(opts.fileAbsPath),
+    plugins: [
+      {
+        name: "plugin-dumi-collect-deps",
+        setup: (builder) => {
+          builder.onResolve({ filter: /.*/ }, (args) => {
+            if (args.kind !== "entry-point" && !args.path.startsWith(".")) {
+              const pkgJsonPath = import_plugin_utils.pkgUp.pkgUpSync({
+                cwd: require.resolve(args.path, { paths: [args.resolveDir] })
+              });
+              if (pkgJsonPath) {
+                asset.dependencies[args.path] = {
+                  type: "NPM",
+                  value: require(pkgJsonPath).version
+                };
+              }
+              return { path: args.path, external: true };
+            }
+            return {
+              path: import_path.default.join(args.resolveDir, args.path),
+              pluginData: { kind: args.kind, resolveDir: args.resolveDir }
+            };
+          });
+          builder.onLoad({ filter: /.*/ }, (args) => {
+            const ext = import_path.default.extname(args.path);
+            const isModule = [".js", ".jsx", ".ts", ".tsx"].includes(ext);
+            const isPlainText = [
+              ".css",
+              ".less",
+              ".sass",
+              ".scss",
+              ".styl",
+              ".json"
+            ].includes(ext);
+            const isEntryPoint = args.pluginData.kind === "entry-point";
+            const filename = isEntryPoint ? `index${ext}` : (0, import_plugin_utils.winPath)(import_path.default.relative(import_path.default.dirname(opts.fileAbsPath), args.path));
+            if (isModule || isPlainText) {
+              asset.dependencies[filename] = {
+                type: "FILE",
+                value: opts.entryPointCode ?? import_fs.default.readFileSync(args.path, "utf-8")
+              };
+              if (isEntryPoint) {
+                const { code, frontmatter } = parseCodeFrontmatter(asset.dependencies[filename].value);
+                if (frontmatter) {
+                  asset.dependencies[filename].value = code;
+                  result.frontmatter = frontmatter;
+                  ["description", "title", "snapshot", "keywords"].forEach((key) => {
+                    asset[key] = frontmatter == null ? void 0 : frontmatter[key];
+                  });
+                }
+              }
+              if (!isEntryPoint || !opts.entryPointCode) {
+                result.sources[filename] = args.path;
+              }
+              return {
+                contents: isModule ? asset.dependencies[filename].value : "",
+                loader: isModule ? ext.slice(1) : "text"
+              };
+            }
+          });
+        }
+      }
+    ]
+  });
+  return result;
+}
+var block_default = parseBlockAsset;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/client/theme-api/DumiDemo.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { IPreviewerProps } from './types';
+export interface IDumiDemoProps {
+    demo: {
+        id: string;
+        inline?: boolean;
+    };
+    previewerProps: Omit<IPreviewerProps, 'asset' | 'children'>;
+}
+export declare const DumiDemo: FC<IDumiDemoProps>;

package/dist/client/theme-api/DumiDemo.js

@@ -0,0 +1,16 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import Previewer from 'dumi/theme/builtins/Previewer';
+import React, { createElement, useContext } from 'react';
+import { Context } from "./context";
+export var DumiDemo = function DumiDemo(props) {
+  var _useContext = useContext(Context),
+      demos = _useContext.demos;
+
+  var _demos$props$demo$id = demos[props.demo.id],
+      component = _demos$props$demo$id.component,
+      asset = _demos$props$demo$id.asset;
+  return /*#__PURE__*/React.createElement(Previewer, _extends({
+    asset: asset
+  }, props.previewerProps), /*#__PURE__*/createElement(component));
+};

package/dist/client/theme-api/DumiDemoGrid.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+import { IDumiDemoProps } from './DumiDemo';
+export interface IDumiDemoGridProps {
+    items: IDumiDemoProps[];
+}
+export declare const DumiDemoGrid: FC<IDumiDemoGridProps>;

package/dist/client/theme-api/DumiDemoGrid.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DumiDemo } from "./DumiDemo";
+export var DumiDemoGrid = function DumiDemoGrid(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)'
+    }
+  }, props.items.map(function (item) {
+    return /*#__PURE__*/React.createElement("section", {
+      key: item.demo.id
+    }, /*#__PURE__*/React.createElement(DumiDemo, item));
+  }));
+};

package/dist/client/theme-api/context.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentType } from 'react';
+import type { IPreviewerProps } from './types';
+export interface IThemeContext {
+    demos: Record<string, {
+        component: ComponentType;
+        asset: IPreviewerProps['asset'];
+    }>;
+    locales: {
+        id: string;
+        name: string;
+        base: string;
+    }[];
+}
+export declare const Context: import("react").Context<IThemeContext>;

package/dist/client/{theme → theme-api}/context.js

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
 export var Context = /*#__PURE__*/createContext({
-  demos: {}
+  demos: {},
+  locales: []
 });

package/dist/client/theme-api/index.d.ts

@@ -0,0 +1,5 @@
+export { useIntl } from 'react-intl';
+export * from './context';
+export * from './DumiDemo';
+export * from './DumiDemoGrid';
+export * from './types';

package/dist/client/theme-api/index.js

@@ -0,0 +1,5 @@
+export { useIntl } from 'react-intl';
+export * from "./context";
+export * from "./DumiDemo";
+export * from "./DumiDemoGrid";
+export * from "./types";

package/dist/client/theme-api/types.d.ts

@@ -0,0 +1,20 @@
+import type { ExampleBlockAsset } from 'dumi-assets-types';
+import type { ReactNode } from 'react';
+export interface IPreviewerProps {
+    /**
+     * title of current demo
+     */
+    title?: string;
+    /**
+     * description of current demo
+     */
+    description?: string;
+    /**
+     * asset metadata of current demo
+     */
+    asset: ExampleBlockAsset;
+    /**
+     * react node of current demo
+     */
+    children: ReactNode;
+}

package/dist/client/theme-api/types.js

@@ -0,0 +1 @@
+export {};

package/dist/client/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["src/*"],
+      "dumi/theme": ["src/client/theme-api"],
+      "dumi/theme/*": ["src/client/theme-default/*"]
+    }
+  }
+}

package/dist/features/compile.js

@@ -41,6 +41,7 @@ var compile_default = (api) => {
       builtins: api.service.themeData.builtins
     });
     memo.module.rule("dumi-demo").type("javascript/auto").test(/\..+$/).enforce("pre").resourceQuery(/techStack/).use("demo-loader").loader(require.resolve("../loaders/demo")).options({ techStacks, cwd: api.cwd });
+    memo.module.rule("dumi-raw").resourceQuery(/raw/).use("raw-loader").loader(require.resolve("raw-loader"));
     if (api.env === "development") {
       memo.plugin("fastRefresh").tap(([params]) => [
         {

package/dist/features/locales.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from "../types";
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/locales.js

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  default: () => locales_default
+});
+module.exports = __toCommonJS(locales_exports);
+var locales_default = (api) => {
+  api.describe({
+    config: {
+      default: [{ id: "zh-CN", name: "\u4E2D\u6587", base: "/" }],
+      schema: (Joi) => Joi.array().items(Joi.object({
+        id: Joi.string().regex(/^[a-z]{2}-[A-Z]{2}$/),
+        name: Joi.string(),
+        base: Joi.string().optional()
+      }))
+    }
+  });
+  api.register({
+    key: "modifyConfig",
+    stage: Infinity,
+    fn: (memo) => {
+      var _a;
+      (_a = memo.locales) == null ? void 0 : _a.forEach((locale, i) => {
+        locale.base ?? (locale.base = i ? `/${locale.id}` : "/");
+      });
+      return memo;
+    }
+  });
+  api.onGenerateFiles(() => {
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/locales/config.ts",
+      content: `export const locales = ${JSON.stringify(api.config.locales, null, 2)};
+export const messages = ${JSON.stringify(api.service.themeData.locales, null, 2)};`
+    });
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/locales/runtime.tsx",
+      content: `
+import { history } from 'umi';
+import React, { useState, type ReactNode } from 'react';
+import { RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
+import { locales, messages } from './config';
+
+const cache = createIntlCache();
+
+const LocalesContainer: FC<{ children: ReactNode }> = (props) => {
+  const [locale] = useState(() => {
+    const matched = locales.find((locale) => history.location.pathname.startsWith(locale.base));
+
+    return matched ? matched.id : locales[0].id;
+  });
+  const [intl] = useState(() => createIntl({ locale, messages: messages[locale] || {} }, cache))
+
+  return <RawIntlProvider value={intl}>{props.children}</RawIntlProvider>;
+}
+
+export function i18nProvider(container: Element) {
+  return React.createElement(LocalesContainer, null, container);
+}
+`
+    });
+  });
+  api.addRuntimePlugin(() => "@@/dumi/locales/runtime.tsx");
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/features/routes.js

@@ -30,6 +30,14 @@ var import_path = __toESM(require("path"));
 var import_pluralize = require("pluralize");
 var import_plugin_utils = require("umi/plugin-utils");
 var CTX_LAYOUT_ID = "dumi-context-layout";
+function localizeUmiRoute(route, locales) {
+  const locale = locales.find((locale2) => route.path.endsWith(`/${locale2.id}`) && import_path.default.parse(route.file).name.endsWith(`.${locale2.id}`));
+  if (locale) {
+    const base = locale.base === "/" ? "" : locale.base;
+    route.path = `${base}${route.path.replace(new RegExp(`/${locale.id}$`), "").replace(/(index|README)$/, "")}`;
+    route.path = route.path !== "/" ? `/${route.path}` : route.path;
+  }
+}
 var routes_default = (api) => {
   api.describe({ key: "dumi:routes" });
   api.modifyConfig((memo) => {
@@ -71,22 +79,24 @@ var routes_default = (api) => {
         route.id = `${dir}/${key}`;
         route.parentId = docLayoutId;
         route.file = import_path.default.resolve(base, route.file);
+        localizeUmiRoute(route, api.config.locales);
         routes[route.id] = route;
       });
     });
     entityDirs.forEach(({ type, dir }) => {
       const base = import_path.default.join(api.cwd, dir);
-      const entityFiles = import_plugin_utils.glob.sync("{*,*/index,*/README}.md", { cwd: base });
+      const entityFiles = import_plugin_utils.glob.sync("{*,*/index,*/index.*,*/README,*/README.*}.md", { cwd: base });
       entityFiles.forEach((file) => {
-        const routePath = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file)).replace(/(\/index|\/README)?\.md$/, "");
+        const routePath = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file)).replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/");
         const routeId = `${dir}/${routePath}`;
         routes[routeId] = {
           id: routeId,
           path: routePath,
-          absPath: routePath,
+          absPath: `/${routePath}`,
           parentId: docLayoutId,
           file: import_path.default.resolve(base, file)
         };
+        localizeUmiRoute(routes[routeId], api.config.locales);
       });
     });
     return routes;

package/dist/features/theme/index.js

@@ -69,13 +69,17 @@ var theme_default = (api) => {
         DumiDemo: {
           specifier: "{ DumiDemo }",
           source: "dumi/theme"
+        },
+        DumiDemoGrid: {
+          specifier: "{ DumiDemoGrid }",
+          source: "dumi/theme"
         }
       });
       return memo;
     }
   });
   api.modifyConfig((memo) => {
-    memo.alias["dumi/theme$"] = require.resolve("../../client/theme");
+    memo.alias["dumi/theme$"] = require.resolve("../../client/theme-api");
     if (localThemeData) {
       themeMapKeys.forEach((key) => {
         Object.values(localThemeData[key] || {}).forEach((item) => {
@@ -87,7 +91,7 @@ var theme_default = (api) => {
     memo.alias["dumi/theme-original"] = import_path.default.join(api.paths.absTmpPath, "dumi/theme");
     memo.alias["dumi/theme-default"] = DEFAULT_THEME_PATH;
     memo.extraBabelIncludes ?? (memo.extraBabelIncludes = []);
-    memo.extraBabelIncludes.push(import_path.default.resolve(__dirname, "../../client/theme"));
+    memo.extraBabelIncludes.push(import_path.default.resolve(__dirname, "../../client/theme-api"));
     return memo;
   });
   api.modifyRoutes((routes) => {
@@ -128,12 +132,13 @@ export default {
       content: `import { Context } from 'dumi/theme';
 import { useOutlet } from 'umi';
 import demos from '../demos';
+import { locales } from '../locales/config';
 
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
 
   return (
-    <Context.Provider value={{ demos }}>{outlet}</Context.Provider>
+    <Context.Provider value={{ demos, locales }}>{outlet}</Context.Provider>
   );
 }`
     });

package/dist/features/theme/loader.js

@@ -39,7 +39,7 @@ function getComponentMapFromDir(globExp, dir) {
 }
 function getLocaleMapFromDir(globExp, dir) {
   return import_plugin_utils.glob.sync(globExp, { cwd: dir }).reduce((ret, file) => {
-    const locale = file.replace(/\.json$/, "");
+    const locale = import_path.default.basename(file.replace(/\.json$/, ""));
     ret[locale] = require(import_path.default.join(dir, file));
     return ret;
   }, {});
@@ -49,8 +49,8 @@ var loader_default = (dir) => {
     name: import_path.default.basename(dir),
     path: dir,
     locales: getLocaleMapFromDir("locales/*.json", dir),
-    builtins: getComponentMapFromDir("builtins/{*,*/index}.{js,jsx,ts,tsx}", dir),
-    slots: getComponentMapFromDir("slots/{*,*/index}.{js,jsx,ts,tsx}", dir),
+    builtins: getComponentMapFromDir("builtins/{!(*.d),*/index}.{js,jsx,ts,tsx}", dir),
+    slots: getComponentMapFromDir("slots/{!(*.d),*/index}.{js,jsx,ts,tsx}", dir),
     layouts: getComponentMapFromDir("layouts/{GlobalLayout,DocLayout,DemoLayout}{.,/index.}{js,jsx,ts,tsx}", dir)
   };
 };

package/dist/loaders/markdown/index.js

@@ -40,9 +40,20 @@ function mdLoader(raw) {
 
 export default {
   {{#demos}}
-  '{{{id}}}': {{{component}}},
+  '{{{id}}}': {
+    component: {{{component}}},
+    asset: {{{renderAsset}}}
+  },
   {{/demos}}
-}`, { demos: ret.meta.demos }));
+}`, {
+        demos: ret.meta.demos,
+        renderAsset: function renderAsset() {
+          Object.keys(this.sources).forEach((file) => {
+            this.asset.dependencies[file].value = `{{{require('!!raw-loader!${this.sources[file]}?raw').default}}}`;
+          });
+          return JSON.stringify(this.asset, null, 2).replace(/"{{{|}}}"/g, "");
+        }
+      }));
     } else {
       cb(null, `${Object.values(opts.builtins).map((item) => `import ${item.specifier} from '${item.source}';`).join("\n")}
 

package/dist/loaders/markdown/transformer/index.d.ts

@@ -1,4 +1,6 @@
+import type { IParsedBlockAsset } from "../../../assetParsers/block";
 import type { IDumiTechStack } from "../../../types";
+import type { DataMap } from 'vfile';
 declare module 'hast' {
     interface Element {
         JSXAttributes?: Array<{
@@ -11,6 +13,16 @@ declare module 'hast' {
         }>;
     }
 }
+declare module 'vfile' {
+    interface DataMap {
+        demos: {
+            id: string;
+            component: string;
+            asset: IParsedBlockAsset['asset'];
+            sources: IParsedBlockAsset['sources'];
+        }[];
+    }
+}
 export interface IMdTransformerOptions {
     cwd: string;
     fileAbsPath: string;
@@ -18,20 +30,10 @@ export interface IMdTransformerOptions {
 }
 export interface IMdTransformerResult {
     content: string;
-    meta: {
-        demos: {
-            id: string;
-            component: string;
-        }[];
-    };
+    meta: DataMap;
 }
 declare const _default: (raw: string, opts: IMdTransformerOptions) => Promise<{
     content: string;
-    meta: {
-        demos: {
-            id: string;
-            component: string;
-        }[];
-    };
+    meta: import("vfile").Data;
 }>;
 export default _default;

package/dist/loaders/markdown/transformer/index.js

@@ -33,9 +33,11 @@ var import_rehypeStrip = __toESM(require("./rehypeStrip"));
 var transformer_default = async (raw, opts) => {
   const { unified } = await import("unified");
   const { default: remarkParse } = await import("remark-parse");
+  const { default: remarkFrontmatter } = await import("remark-frontmatter");
+  const { default: remarkBreaks } = await import("remark-breaks");
   const { default: remarkGfm } = await import("remark-gfm");
   const { default: remarkRehype } = await import("remark-rehype");
-  const result = await unified().use(remarkParse).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(import_rehypeRaw.default).use(import_rehypeStrip.default).use(import_rehypeDemo.default, {
+  const result = await unified().use(remarkParse).use(remarkFrontmatter).use(remarkBreaks).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(import_rehypeRaw.default).use(import_rehypeStrip.default).use(import_rehypeDemo.default, {
     techStacks: opts.techStacks,
     cwd: opts.cwd,
     fileAbsPath: opts.fileAbsPath

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -25,15 +25,20 @@ __export(rehypeDemo_exports, {
   default: () => rehypeDemo
 });
 module.exports = __toCommonJS(rehypeDemo_exports);
+var import_block = __toESM(require("../../../assetParsers/block"));
 var import_utils = require("../../../utils");
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var visit;
 var SKIP;
 var toString;
+var isElement;
+var DEMO_NODE_CONTAINER = "$demo-container";
+var DEMO_PROP_VALUE_KEY = "$demo-prop-value-key";
 (async () => {
   ({ visit, SKIP } = await import("unist-util-visit"));
   ({ toString } = await import("mdast-util-to-string"));
+  ({ isElement } = await import("hast-util-is-element"));
 })();
 function getCodeLang(node) {
   var _a, _b;
@@ -49,42 +54,143 @@ function getCodeId(cwd, fileAbsPath, codeIndex, entityName) {
   const prefix = entityName || (0, import_utils.getRoutePathFromFsPath)(import_path.default.relative(cwd, fileAbsPath)).replace(/\//g, "-");
   return [prefix, "demo", String(codeIndex)].filter(Boolean).join("-");
 }
+function tryMarkDemoNode(node, opts) {
+  var _a, _b;
+  let isDemoNode = Boolean((_a = node.data) == null ? void 0 : _a.techStack);
+  if (!isDemoNode) {
+    const lang = getCodeLang(node);
+    const techStack = lang && opts.techStacks.find((ts) => ts.isSupported(node, lang));
+    if (techStack) {
+      isDemoNode = true;
+      node.data ?? (node.data = {});
+      node.data.techStack = techStack;
+      node.data.lang = lang;
+      node.data.type = typeof ((_b = node.properties) == null ? void 0 : _b.src) === "string" ? "external" : "code-block";
+    }
+  }
+  return isDemoNode;
+}
 function rehypeDemo(opts) {
-  return (tree, vFile) => {
+  return async (tree, vFile) => {
+    const deferrers = [];
+    const replaceNodes = [];
     let index = 0;
-    const demos = [];
     visit(tree, "element", (node) => {
-      var _a;
-      if (["pre", "p"].includes(node.tagName) && node.children.length === 1 && node.children[0].type === "element" && node.children[0].tagName === "code") {
-        const codeNode = node.children[0];
-        const techStack = opts.techStacks.find((ts) => ts.isSupported(codeNode, getCodeLang(codeNode)));
-        const hasSrc = typeof ((_a = codeNode.properties) == null ? void 0 : _a.src) === "string";
-        const codeValue = toString(codeNode.children).trim();
-        if (techStack && (hasSrc || codeValue)) {
-          const codeId = getCodeId(opts.cwd, opts.fileAbsPath, index++);
-          if (hasSrc) {
-            const codeAbsPath = import_path.default.resolve(import_path.default.dirname(opts.fileAbsPath), codeNode.properties.src);
-            demos.push({
-              id: codeId,
-              component: `React.lazy(() => import('${(0, import_plugin_utils.winPath)(codeAbsPath)}?techStack=${techStack.name}'))`
+      if (isElement(node, "pre") && node.children.length === 1 && isElement(node.children[0], "code") && tryMarkDemoNode(node.children[0], opts)) {
+        node.tagName = "p";
+        node.data ?? (node.data = {});
+        node.data[DEMO_NODE_CONTAINER] = true;
+      }
+    });
+    visit(tree, "element", (node, nodeIndex, parent) => {
+      if (isElement(node, "p")) {
+        for (let childIndex = 0; childIndex < node.children.length; childIndex += 1) {
+          let child = node.children[childIndex];
+          if (isElement(child, "code") && tryMarkDemoNode(child, opts)) {
+            const isFirstChild = childIndex === 0;
+            let nextChildIndex = childIndex + 1;
+            let nextChild = node.children[nextChildIndex];
+            let splitFrom = childIndex;
+            if (isFirstChild) {
+              node.data ?? (node.data = {});
+              node.data[DEMO_NODE_CONTAINER] = true;
+              while (nextChild && (isElement(nextChild, "code") && tryMarkDemoNode(nextChild, opts) || isElement(nextChild, "br"))) {
+                splitFrom += 1;
+                nextChildIndex = splitFrom + 1;
+                nextChild = node.children[nextChildIndex];
+              }
+              if (!nextChild)
+                return SKIP;
+            }
+            const splitChildren = node.children.splice(splitFrom);
+            parent.children.splice(nodeIndex + 1, 0, {
+              type: "element",
+              tagName: "p",
+              children: splitChildren
             });
-          } else {
-            demos.push({
+            return SKIP;
+          }
+        }
+      }
+    });
+    visit(tree, "element", (node) => {
+      var _a;
+      if (isElement(node, "p") && ((_a = node.data) == null ? void 0 : _a[DEMO_NODE_CONTAINER])) {
+        const demosPropData = [];
+        node.children.forEach((codeNode) => {
+          if (isElement(codeNode, "code")) {
+            const codeType = codeNode.data.type;
+            const techStack = codeNode.data.techStack;
+            const codeId = getCodeId(opts.cwd, opts.fileAbsPath, index++);
+            const codeValue = toString(codeNode.children).trim();
+            const parseOpts = {
               id: codeId,
-              component: techStack.transformCode(codeValue, {
+              refAtomIds: [],
+              fileAbsPath: "",
+              entryPointCode: codeType === "external" ? void 0 : codeValue
+            };
+            const previewerProps = {};
+            let component = "";
+            if (codeNode.data.type === "external") {
+              parseOpts.fileAbsPath = import_path.default.resolve(import_path.default.dirname(opts.fileAbsPath), codeNode.properties.src);
+              component = `React.lazy(() => import('${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
+            } else {
+              parseOpts.fileAbsPath = opts.fileAbsPath.replace(".md", ".tsx");
+              component = techStack.transformCode(codeValue, {
                 type: "code-block",
                 fileAbsPath: opts.fileAbsPath
-              })
+              });
+            }
+            deferrers.push((0, import_block.default)(parseOpts).then(async ({ asset, sources, frontmatter }) => {
+              const { src, className, title, description, ...restAttrs } = codeNode.properties || {};
+              if (description) {
+                asset.description = String(description);
+              }
+              if (codeType === "external" && codeValue) {
+                asset.title = codeValue;
+              }
+              Object.assign(previewerProps, frontmatter, restAttrs);
+              return {
+                id: asset.id,
+                component,
+                asset: techStack.generateMetadata ? await techStack.generateMetadata(asset) : asset,
+                sources
+              };
+            }));
+            demosPropData.push({
+              demo: { id: codeId },
+              previewerProps
             });
           }
+        });
+        replaceNodes.push(node);
+        node.children = [];
+        if (demosPropData.length === 1) {
           node.tagName = "DumiDemo";
-          node.properties = { id: codeId };
-          node.children = [];
-          return SKIP;
+          node.data[DEMO_PROP_VALUE_KEY] = demosPropData[0];
+          node.JSXAttributes = [{ type: "JSXSpreadAttribute", argument: "" }];
+        } else {
+          node.tagName = "DumiDemoGrid";
+          node.data[DEMO_PROP_VALUE_KEY] = demosPropData;
+          node.JSXAttributes = [
+            { type: "JSXAttribute", name: "items", value: "" }
+          ];
         }
+        return SKIP;
       }
     });
-    vFile.data.demos = demos;
+    await Promise.all(deferrers).then((demos) => {
+      vFile.data.demos = demos;
+      replaceNodes.forEach((node) => {
+        const value = JSON.stringify(node.data[DEMO_PROP_VALUE_KEY]);
+        if (node.JSXAttributes[0].type === "JSXAttribute") {
+          node.JSXAttributes[0].value = value;
+        } else {
+          node.JSXAttributes[0].argument = value;
+        }
+        delete node.data[DEMO_PROP_VALUE_KEY];
+      });
+    });
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/loaders/markdown/transformer/rehypeIsolation.js

@@ -30,7 +30,7 @@ var visit;
   ({ visit } = await import("unist-util-visit"));
 })();
 function isDemoNode(node) {
-  return node.tagName === "DumiDemo";
+  return ["DumiDemo", "DumiDemoGrid"].includes(node.tagName);
 }
 function rehypeIsolation() {
   return (tree) => {

package/dist/loaders/markdown/transformer/rehypeJsxify.js

@@ -51,6 +51,7 @@ function rehypeJsxify() {
     visitUnist(ast, "element", (node) => {
       var _a;
       (_a = node.JSXAttributes) == null ? void 0 : _a.forEach((attr, i) => {
+        node.properties ?? (node.properties = {});
         if (attr.type === "JSXAttribute") {
           node.properties[`${JSX_PROP_PREFIX}${attr.name}`] = attr.value;
         } else if (attr.type === "JSXSpreadAttribute") {

package/dist/preset.js

@@ -33,7 +33,8 @@ var preset_default = (api) => {
       require.resolve("./features/configPlugins"),
       require.resolve("./features/compile"),
       require.resolve("./features/routes"),
-      require.resolve("./features/theme")
+      require.resolve("./features/theme"),
+      require.resolve("./features/locales")
     ]
   };
 };

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import type { IThemeLoadResult } from "./features/theme/loader";
 import type { IModify } from '@umijs/core';
+import type { ExampleBlockAsset } from 'dumi-assets-types';
 import type { Element } from 'hast';
 import type { IApi as IUmiApi } from 'umi';
 declare type IUmiConfig = IUmiApi['config'];
@@ -11,6 +12,11 @@ export interface IDumiConfig extends IUmiConfig {
             dir: string;
         }[];
     };
+    locales: {
+        id: string;
+        name: string;
+        base?: string;
+    }[];
 }
 export declare abstract class IDumiTechStack {
     /**
@@ -29,10 +35,9 @@ export declare abstract class IDumiTechStack {
         fileAbsPath: string;
     }): string;
     /**
-     * generator for return assets meta data
-     * TODO: real assets meta data types
+     * generator for return asset metadata
      */
-    abstract generateMetadata?(): any;
+    abstract generateMetadata?(asset: ExampleBlockAsset): Promise<ExampleBlockAsset> | ExampleBlockAsset;
     /**
      * generator for return previewer props
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -12,7 +12,9 @@
   "files": [
     "bin",
     "dist",
-    "compiled"
+    "compiled",
+    "theme-default",
+    "theme.d.ts"
   ],
   "scripts": {
     "build": "father build",
@@ -51,25 +53,34 @@
     "@types/hast": "^2.3.4",
     "@umijs/bundler-utils": "^4.0.9",
     "@umijs/core": "^4.0.9",
+    "dumi-assets-types": "2.0.0-alpha.0",
     "estree-util-to-js": "^1.1.0",
     "estree-util-visit": "^1.2.0",
+    "hast-util-is-element": "^2.1.2",
     "hast-util-raw": "^7.2.2",
     "hast-util-to-estree": "^2.1.0",
+    "js-yaml": "^4.1.0",
     "mdast-util-to-string": "^3.1.0",
     "pluralize": "^8.0.0",
+    "raw-loader": "^4.0.2",
+    "react-intl": "^6.1.1",
+    "remark-breaks": "^3.0.2",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "umi": "^4.0.9",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
-    "v8-compile-cache": "2.3.0"
+    "v8-compile-cache": "2.3.0",
+    "vfile": "^5.3.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@jest/types": "^27.0.0",
     "@types/jest": "^27.0.0",
+    "@types/js-yaml": "^4.0.5",
     "@types/node": "^18.6.3",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.16",
@@ -77,7 +88,7 @@
     "@umijs/test": "^4.0.9",
     "cross-env": "^7.0.3",
     "eslint": "^8.20.0",
-    "father": "^4.0.0-rc.8",
+    "father": "^4.0.3",
     "husky": "^8.0.1",
     "jest": "^27.0.0",
     "lint-staged": "^13.0.3",
@@ -86,7 +97,12 @@
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.2.0",
     "stylelint": "^14.9.1",
-    "ts-node": "^10.0.0"
+    "ts-node": "^10.0.0",
+    "typescript": "~4.7.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "packageManager": "pnpm@7.3.0",
   "publishConfig": {

package/theme-default/builtins/Previewer.d.ts

@@ -0,0 +1,4 @@
+import type { IPreviewerProps } from 'dumi/theme';
+import { type FC } from 'react';
+declare const Previewer: FC<IPreviewerProps>;
+export default Previewer;

package/theme-default/builtins/Previewer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+var Previewer = function Previewer(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid #eee'
+    }
+  }, props.children);
+};
+
+export default Previewer;

package/theme-default/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+  "a": "A"
+}

package/theme-default/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "a": "嘿"
+}

package/theme.d.ts

@@ -0,0 +1 @@
+export * from './dist/client/theme-api';

package/dist/client/theme/DumiDemo.d.ts

@@ -1,4 +0,0 @@
-import { type FC } from 'react';
-export declare const DumiDemo: FC<{
-    id: string;
-}>;

package/dist/client/theme/DumiDemo.js

@@ -1,9 +0,0 @@
-import { createElement, useContext } from 'react';
-import { Context } from "./context";
-export var DumiDemo = function DumiDemo(props) {
-  var _useContext = useContext(Context),
-      demos = _useContext.demos;
-
-  var component = demos[props.id];
-  return /*#__PURE__*/createElement(component);
-};

package/dist/client/theme/context.d.ts

@@ -1,5 +0,0 @@
-import { type ComponentType } from 'react';
-export interface IThemeContext {
-    demos: Record<string, ComponentType>;
-}
-export declare const Context: import("react").Context<IThemeContext>;

package/dist/client/theme/index.d.ts

@@ -1,2 +0,0 @@
-export * from './context';
-export * from './DumiDemo';

package/dist/client/theme/index.js

@@ -1,2 +0,0 @@
-export * from "./context";
-export * from "./DumiDemo";