From 523e6d92e01bcbd6d930c3e59a3ff40961c2572c Mon Sep 17 00:00:00 2001
From: kakachake <282281884@qq.com>
Date: Wed, 11 Jan 2023 21:47:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E7=83=AD=E6=9B=B4?=
=?UTF-8?q?=E6=96=B0=20&=20=E5=A4=9A=E8=B7=AF=E7=94=B1=E6=89=93=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.cjs | 2 +
.prettierignore | 1 -
.prettierrc | 3 +-
docs/b.tsx | 7 +
docs/config.ts | 10 +
docs/counter.tsx | 16 +
docs/guide/a.tsx | 7 +
docs/guide/index.tsx | 7 +
docs/index.md | 1 -
docs/index.mdx | 22 +
docs/tsconfig.json | 5 +
package.json | 29 +-
pnpm-lock.yaml | 1709 ++++++++++++++++-
src/node/__test__/md.test.ts | 90 +
src/node/build.ts | 80 +-
src/node/cli.ts | 17 +-
src/node/config.ts | 83 +
src/node/dev.ts | 18 +-
src/node/index.ts | 1 +
src/node/plugin-island/config.ts | 52 +
src/node/plugin-island/indexHtml.ts | 1 -
src/node/plugin-mdx/index.ts | 6 +
src/node/plugin-mdx/pluginMdxHmr.ts | 34 +
src/node/plugin-mdx/pluginMdxRollup.ts | 46 +
.../plugin-mdx/rehypePlugins/preWrapper.ts | 54 +
src/node/plugin-mdx/rehypePlugins/shiki.ts | 33 +
src/node/plugin-mdx/remarkPlugins/toc.ts | 64 +
src/node/plugin-routes/RouteService.test.ts | 53 +
src/node/plugin-routes/RouteService.ts | 70 +
src/node/plugin-routes/fixtures/a.mdx | 0
.../plugin-routes/fixtures/guide/index.mdx | 0
src/node/plugin-routes/index.ts | 36 +
src/node/vitePlugins.ts | 23 +
src/runtime/Content.tsx | 7 +
src/runtime/client-entry.tsx | 9 +-
src/runtime/index.ts | 1 +
src/runtime/ssr-entry.tsx | 11 +-
src/shared/types/index.ts | 49 +
src/shared/types/types.d.ts | 10 +
src/theme-default/Layout/index.tsx | 9 +-
tsconfig.json | 9 +-
tsup.config.ts | 10 +-
42 files changed, 2571 insertions(+), 124 deletions(-)
create mode 100644 docs/b.tsx
create mode 100644 docs/config.ts
create mode 100644 docs/counter.tsx
create mode 100644 docs/guide/a.tsx
create mode 100644 docs/guide/index.tsx
delete mode 100644 docs/index.md
create mode 100644 docs/index.mdx
create mode 100644 docs/tsconfig.json
create mode 100644 src/node/__test__/md.test.ts
create mode 100644 src/node/config.ts
create mode 100644 src/node/index.ts
create mode 100644 src/node/plugin-island/config.ts
create mode 100644 src/node/plugin-mdx/index.ts
create mode 100644 src/node/plugin-mdx/pluginMdxHmr.ts
create mode 100644 src/node/plugin-mdx/pluginMdxRollup.ts
create mode 100644 src/node/plugin-mdx/rehypePlugins/preWrapper.ts
create mode 100644 src/node/plugin-mdx/rehypePlugins/shiki.ts
create mode 100644 src/node/plugin-mdx/remarkPlugins/toc.ts
create mode 100644 src/node/plugin-routes/RouteService.test.ts
create mode 100644 src/node/plugin-routes/RouteService.ts
create mode 100644 src/node/plugin-routes/fixtures/a.mdx
create mode 100644 src/node/plugin-routes/fixtures/guide/index.mdx
create mode 100644 src/node/plugin-routes/index.ts
create mode 100644 src/node/vitePlugins.ts
create mode 100644 src/runtime/Content.tsx
create mode 100644 src/runtime/index.ts
create mode 100644 src/shared/types/index.ts
create mode 100644 src/shared/types/types.d.ts
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f44be76..4c35429 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,6 +3,8 @@ module.exports = {
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
+ 'prettier',
+ "plugin:prettier/recommended",
],
parser: "@typescript-eslint/parser",
parserOptions: {
diff --git a/.prettierignore b/.prettierignore
index 27c6f3c..384aa4d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,3 @@ pnpm-lock.yaml
dist
bin
esm-cjs
-docs
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index 1807e14..5f35112 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
"semi": true,
"singleQuote": true,
"printWidth": 80,
- "trailingComma": "none"
+ "trailingComma": "none",
+ "endOfLine": "auto"
}
diff --git a/docs/b.tsx b/docs/b.tsx
new file mode 100644
index 0000000..8e0c9c7
--- /dev/null
+++ b/docs/b.tsx
@@ -0,0 +1,7 @@
+const B = ()=>{
+ return
+
hello b
+
+}
+
+export default B
\ No newline at end of file
diff --git a/docs/config.ts b/docs/config.ts
new file mode 100644
index 0000000..4894eba
--- /dev/null
+++ b/docs/config.ts
@@ -0,0 +1,10 @@
+import {defineConfig} from '../dist'
+
+export default defineConfig({
+ title: "123",
+ description:"121152",
+ themeConfig:{
+ },
+ vite:{}
+})
+
diff --git a/docs/counter.tsx b/docs/counter.tsx
new file mode 100644
index 0000000..9624c10
--- /dev/null
+++ b/docs/counter.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+export default function Counter() {
+ const [counter, setCounter] = useState(0);
+ return (
+
+ {
+ setCounter((v) => v + 1);
+ }}
+ >
+ 点击 {counter}
+
+
+ );
+}
diff --git a/docs/guide/a.tsx b/docs/guide/a.tsx
new file mode 100644
index 0000000..c848272
--- /dev/null
+++ b/docs/guide/a.tsx
@@ -0,0 +1,7 @@
+const A = ()=>{
+ return
+
hello a
+
+}
+
+export default A
\ No newline at end of file
diff --git a/docs/guide/index.tsx b/docs/guide/index.tsx
new file mode 100644
index 0000000..4ee928f
--- /dev/null
+++ b/docs/guide/index.tsx
@@ -0,0 +1,7 @@
+const Index = ()=>{
+ return
+
hello index!
+
+}
+
+export default Index
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 52bd9f8..0000000
--- a/docs/index.md
+++ /dev/null
@@ -1 +0,0 @@
-# 123123
diff --git a/docs/index.mdx b/docs/index.mdx
new file mode 100644
index 0000000..32cecd5
--- /dev/null
+++ b/docs/index.mdx
@@ -0,0 +1,22 @@
+---
+title: 'island'
+---
+
+# 1231231
+
+import Counter from './counter.tsx';
+
+Hello World "');
+ });
+
+ test('Compile code', async () => {
+ const mdContent = 'I am using `Island.js`';
+ const result = processor.processSync(mdContent);
+ expect(result.value).toMatchInlineSnapshot(
+ '"I am using Island.js
"'
+ );
+ });
+
+ test('Compile code block', async () => {
+ const mdContent = '```js\nconsole.log("Hello World");\n```';
+ const result = processor.processSync(mdContent);
+ expect(result.value).toMatchInlineSnapshot(`
+ "js console . log ( \\" Hello World \\" ) ; => ({
mode: 'production',
root,
+ ssr: {
+ noExternal: ['react-router-dom']
+ },
+ plugins: (await createVitePlugins(config, undefined, isServer)) as Plugin[],
build: {
ssr: isServer,
- outDir: isServer ? '.temp' : 'build',
+ outDir: isServer ? path.join(root, '.temp') : path.join(root, 'build'),
rollupOptions: {
input: isServer ? SERVER_ENTRY_PATH : CLIENT_ENTRY_PATH,
output: {
@@ -28,9 +38,9 @@ export async function bundle(root: string) {
try {
const [clientBundle, serverBundle] = await Promise.all([
// client build
- viteBuild(resolveViteConfig(false)),
+ viteBuild(await resolveViteConfig(false)),
// server build
- viteBuild(resolveViteConfig(true))
+ viteBuild(await resolveViteConfig(true))
]);
return [clientBundle, serverBundle] as [RollupOutput, RollupOutput];
} catch (e) {
@@ -39,40 +49,52 @@ export async function bundle(root: string) {
}
export async function renderPage(
- render: () => string,
+ render: (pagePath: string) => string,
root: string,
- clientBundle: RollupOutput
+ clientBundle: RollupOutput,
+ routes: Route[]
) {
const clientChunk = clientBundle.output.find(
(chunk) => chunk.type === 'chunk' && chunk.isEntry
);
console.log('Rendering page in server side...');
- const appHtml = render();
- const html = `
-
-
-
- title
- ${appHtml}
-
-
-`.trim();
- await fs.ensureDir(join(root, 'build'));
- await fs.writeFile(join(root, 'build/index.html'), html);
+ await Promise.all(
+ routes.map(async (route) => {
+ const routePath = route.path;
+ const appHtml = render(routePath);
+ const html = `
+
+
+
+ title
+ ${appHtml}
+
+
+ `.trim();
+ const fileName = routePath.endsWith('/')
+ ? `${routePath}index.html`
+ : `${routePath}.html`;
+ // 当前文件的文件夹路径
+ await fs.ensureDir(join(root, 'build', dirname(fileName)));
+ await fs.writeFile(join(root, 'build', fileName), html);
+ })
+ );
await fs.remove(join(root, '.temp'));
}
-export async function build(root: string = process.cwd()) {
+export async function build(root: string = process.cwd(), config: SiteConfig) {
// 1. bundle - client 端 + server 端
- const [clientBundle] = await bundle(root);
+ const [clientBundle] = await bundle(root, config);
// 2. 引入 server-entry 模块
const serverEntryPath = join(root, '.temp', 'ssr-entry.js');
- const { render } = await import(pathToFileURL(serverEntryPath).toString());
+ const { render, routes } = await import(
+ pathToFileURL(serverEntryPath).toString()
+ );
// 3. 服务端渲染，产出 HTML
- await renderPage(render, root, clientBundle);
+ await renderPage(render, root, clientBundle, routes);
}
diff --git a/src/node/cli.ts b/src/node/cli.ts
index fbc709b..3a8cf07 100644
--- a/src/node/cli.ts
+++ b/src/node/cli.ts
@@ -1,14 +1,22 @@
import cac from 'cac';
import { resolve } from 'path';
import { build } from './build';
+import { resolveConfig } from './config';
import { createDevServer } from './dev';
const cli = cac('island').version('0.0.1').help();
cli.command('dev [root]', 'start dev server').action(async (root: string) => {
- const server = await createDevServer(root);
- await server.listen();
- server.printUrls();
+ const createServer = async () => {
+ const { createDevServer } = await import('./dev');
+ const server = await createDevServer(root, async () => {
+ await server.close();
+ await createServer();
+ });
+ await server.listen();
+ server.printUrls();
+ };
+ await createServer();
});
cli
@@ -16,7 +24,8 @@ cli
.action(async (root: string) => {
try {
root = resolve(root);
- await build(root);
+ const config = await resolveConfig(root, 'build', 'production');
+ await build(root, config);
} catch (e) {
console.log(e);
}
diff --git a/src/node/config.ts b/src/node/config.ts
new file mode 100644
index 0000000..62ac2ad
--- /dev/null
+++ b/src/node/config.ts
@@ -0,0 +1,83 @@
+import path from 'path';
+import fs from 'fs-extra';
+import { loadConfigFromFile } from 'vite';
+import { SiteConfig, UserConfig } from 'shared/types/index';
+
+type RawConfig =
+ | UserConfig
+ | Promise
+ | (() => UserConfig | Promise);
+
+function getUserConfigPath(root: string) {
+ try {
+ const supportConfigFiles = ['config.ts', 'config.js'];
+ const configPath = supportConfigFiles
+ .map((file) => path.resolve(root, file))
+ .find((file) => fs.pathExistsSync(file));
+ if (!configPath) {
+ throw new Error('Config file not found');
+ }
+ return configPath;
+ } catch (error) {
+ throw new Error('Failed to load user config');
+ }
+}
+
+function resolveSiteData(userConfig: UserConfig) {
+ return {
+ title: userConfig.title || 'Island.js',
+ description: userConfig.description || 'SSG Framework',
+ themeConfig: userConfig.themeConfig || {},
+ vite: userConfig.vite || {}
+ };
+}
+
+export async function resolveUserConfig(
+ root: string,
+ command: 'serve' | 'build',
+ mode: 'production' | 'development'
+) {
+ // 1. 获取配置文件路径，支持js, ts格式
+ const configPath = getUserConfigPath(root);
+
+ // 2. 解析配置文件
+ const result = await loadConfigFromFile(
+ {
+ command,
+ mode
+ },
+ configPath,
+ root
+ );
+ if (result) {
+ const { config: rawConfig = {} as RawConfig } = result;
+ // 1. object
+ // 2. promise
+ // 3. function
+ const userConfig = await (typeof rawConfig === 'function'
+ ? rawConfig()
+ : rawConfig);
+
+ return [configPath, userConfig] as const;
+ } else {
+ return [configPath, {} as UserConfig] as const;
+ }
+}
+
+export async function resolveConfig(
+ root: string,
+ command: 'serve' | 'build',
+ mode: 'production' | 'development'
+) {
+ const [configPath, userConfig] = await resolveUserConfig(root, command, mode);
+ const siteConfig: SiteConfig = {
+ root,
+ configPath: configPath,
+ siteData: resolveSiteData(userConfig as UserConfig)
+ };
+ return siteConfig;
+}
+
+export function defineConfig(config: UserConfig): UserConfig {
+ return config;
+}
diff --git a/src/node/dev.ts b/src/node/dev.ts
index 31f240c..4797ed0 100644
--- a/src/node/dev.ts
+++ b/src/node/dev.ts
@@ -1,11 +1,19 @@
import { createServer } from 'vite';
-import { pluginIndexHtml } from './plugin-island/indexHtml';
-import pluginReact from '@vitejs/plugin-react';
+
import { PACKAGE_ROOT } from './constants';
-export function createDevServer(root: string) {
+import { resolveConfig } from './config';
+import { createVitePlugins } from './vitePlugins';
+import type { Plugin } from 'vite';
+
+export async function createDevServer(
+ root: string,
+ restart: () => Promise
+) {
+ const config = await resolveConfig(root, 'serve', 'development');
+
return createServer({
- root,
- plugins: [pluginIndexHtml(), pluginReact()],
+ root: PACKAGE_ROOT,
+ plugins: (await createVitePlugins(config, restart)) as Plugin[],
server: {
fs: {
allow: [PACKAGE_ROOT]
diff --git a/src/node/index.ts b/src/node/index.ts
new file mode 100644
index 0000000..b8bb5ac
--- /dev/null
+++ b/src/node/index.ts
@@ -0,0 +1 @@
+export { defineConfig } from './config';
diff --git a/src/node/plugin-island/config.ts b/src/node/plugin-island/config.ts
new file mode 100644
index 0000000..fe86269
--- /dev/null
+++ b/src/node/plugin-island/config.ts
@@ -0,0 +1,52 @@
+import { SiteConfig } from '../../shared/types';
+import { normalizePath, Plugin, ViteDevServer } from 'vite';
+import path from 'path';
+import { PACKAGE_ROOT, RUNTIME_PATH } from 'node/constants';
+
+const SITE_DATA_ID = 'island:site-data';
+
+export function pluginConfig(config: SiteConfig, restart?: () => void): Plugin {
+ let server: ViteDevServer | null = null;
+ return {
+ name: 'island:site-data',
+ resolveId(id) {
+ if (id === SITE_DATA_ID) {
+ return '\0' + SITE_DATA_ID;
+ }
+ },
+ load(id) {
+ if (id === '\0' + SITE_DATA_ID) {
+ return `export default ${JSON.stringify(config.siteData)}`;
+ }
+ },
+ configureServer(_server) {
+ // 获取vite dev server实例
+ server = _server;
+ },
+ async handleHotUpdate(ctx) {
+ const customWatchedFiles = [normalizePath(config.configPath)];
+ const include = (id: string) =>
+ customWatchedFiles.some((file) => id.includes(file));
+
+ if (include(ctx.file)) {
+ console.log(config.root);
+ console.log(`
+ \n${path.relative(config.root, ctx.file)} changed,
+ \nrestarting server...
+ `);
+
+ // 调用dev.ts中的createServer
+ restart && (await restart());
+ }
+ },
+ config() {
+ return {
+ resolve: {
+ alias: {
+ '@runtime': RUNTIME_PATH
+ }
+ }
+ };
+ }
+ };
+}
diff --git a/src/node/plugin-island/indexHtml.ts b/src/node/plugin-island/indexHtml.ts
index 4f9ac76..60f36d6 100644
--- a/src/node/plugin-island/indexHtml.ts
+++ b/src/node/plugin-island/indexHtml.ts
@@ -26,7 +26,6 @@ export function pluginIndexHtml(): Plugin {
return () => {
server.middlewares.use(async (req, res, next) => {
let html = await fs.readFile(DEFAULT_HTML_PATH, 'utf-8');
-
try {
html = await server.transformIndexHtml(
req.url,
diff --git a/src/node/plugin-mdx/index.ts b/src/node/plugin-mdx/index.ts
new file mode 100644
index 0000000..4a9f31a
--- /dev/null
+++ b/src/node/plugin-mdx/index.ts
@@ -0,0 +1,6 @@
+import { pluginMdxHMR } from './pluginMdxHmr';
+import { pluginMdxRollup } from './pluginMdxRollup';
+
+export async function createMdxPlugins() {
+ return [await pluginMdxRollup(), await pluginMdxHMR()];
+}
diff --git a/src/node/plugin-mdx/pluginMdxHmr.ts b/src/node/plugin-mdx/pluginMdxHmr.ts
new file mode 100644
index 0000000..fde7186
--- /dev/null
+++ b/src/node/plugin-mdx/pluginMdxHmr.ts
@@ -0,0 +1,34 @@
+import assert from 'assert';
+import { Plugin } from 'vite';
+
+export function pluginMdxHMR(): Plugin {
+ let viteReactPlugin: Plugin;
+
+ return {
+ name: 'vite-plugin-mdx-hmr',
+ apply: 'serve',
+ configResolved(config) {
+ viteReactPlugin = config.plugins.find(
+ (plugin) => plugin.name === 'vite:react-babel'
+ ) as Plugin;
+ },
+ async transform(code, id, opts) {
+ if (/\.mdx?$/.test(id)) {
+ assert(typeof viteReactPlugin.transform === 'function');
+ const result = await viteReactPlugin.transform?.call(
+ this,
+ code,
+ id + '?.jsx',
+ opts
+ );
+ if (
+ typeof result === 'object' &&
+ !result.code?.includes('import.meta.hot.accept(')
+ ) {
+ result.code += 'import.meta.hot.accept();';
+ }
+ return result;
+ }
+ }
+ };
+}
diff --git a/src/node/plugin-mdx/pluginMdxRollup.ts b/src/node/plugin-mdx/pluginMdxRollup.ts
new file mode 100644
index 0000000..caec65d
--- /dev/null
+++ b/src/node/plugin-mdx/pluginMdxRollup.ts
@@ -0,0 +1,46 @@
+import pluginMdx from '@mdx-js/rollup';
+import remarkGfm from 'remark-gfm';
+import type { Plugin } from 'vite';
+import rehypePluginAutolinkHeadings from 'rehype-autolink-headings';
+import rehypePluginSlug from 'rehype-slug';
+import remarkPluginMDXFrontMatter from 'remark-mdx-frontmatter';
+import remarkPluginFrontmatter from 'remark-frontmatter';
+import { rehypePluginPreWrapper } from './rehypePlugins/preWrapper';
+import { rehypePluginShiki } from './rehypePlugins/shiki';
+import { remarkPluginToc } from './remarkPlugins/toc';
+import shiki from 'shiki';
+
+export async function pluginMdxRollup(): Promise {
+ return pluginMdx({
+ remarkPlugins: [
+ remarkGfm,
+ [remarkPluginMDXFrontMatter, { name: 'frontmatter' }],
+ remarkPluginFrontmatter,
+ remarkPluginToc
+ ],
+ rehypePlugins: [
+ rehypePluginSlug,
+ [
+ rehypePluginAutolinkHeadings,
+ {
+ properties: {
+ class: 'header-anchor'
+ },
+ content: {
+ type: 'text',
+ value: '#'
+ }
+ }
+ ],
+ rehypePluginPreWrapper,
+ [
+ rehypePluginShiki,
+ {
+ highlighter: await shiki.getHighlighter({
+ theme: 'nord'
+ })
+ }
+ ]
+ ]
+ }) as unknown as Plugin;
+}
diff --git a/src/node/plugin-mdx/rehypePlugins/preWrapper.ts b/src/node/plugin-mdx/rehypePlugins/preWrapper.ts
new file mode 100644
index 0000000..8a3a5ca
--- /dev/null
+++ b/src/node/plugin-mdx/rehypePlugins/preWrapper.ts
@@ -0,0 +1,54 @@
+import type { Plugin } from 'unified';
+
+import { visit } from 'unist-util-visit';
+import type { Element, Root } from 'hast';
+
+export const rehypePluginPreWrapper: Plugin<[], Root> = () => {
+ return (tree) => {
+ visit(tree, 'element', (node) => {
+ if (
+ node.tagName === 'pre' &&
+ node.children[0]?.type === 'element' &&
+ node.children[0]?.tagName === 'code' &&
+ node.data?.isVisited !== true
+ ) {
+ const codeNode = node.children[0] as Element;
+ const codeClassName = codeNode.properties?.className?.toString() || '';
+ const lang = codeClassName.replace('language-', '');
+
+ const cloneNode: Element = {
+ type: 'element',
+ tagName: 'pre',
+ children: node.children,
+ properties: {
+ className: codeClassName
+ },
+ data: {
+ isVisited: true
+ }
+ };
+
+ node.tagName = 'div';
+ node.properties = node.properties || {};
+ node.properties.className = codeClassName;
+
+ node.children = [
+ {
+ type: 'element',
+ tagName: 'span',
+ properties: {
+ className: 'code-lang'
+ },
+ children: [
+ {
+ type: 'text',
+ value: lang
+ }
+ ]
+ },
+ cloneNode
+ ];
+ }
+ });
+ };
+};
diff --git a/src/node/plugin-mdx/rehypePlugins/shiki.ts b/src/node/plugin-mdx/rehypePlugins/shiki.ts
new file mode 100644
index 0000000..b1bd75e
--- /dev/null
+++ b/src/node/plugin-mdx/rehypePlugins/shiki.ts
@@ -0,0 +1,33 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Text, Root } from 'hast';
+import { fromHtml } from 'hast-util-from-html';
+import shiki from 'shiki';
+
+interface Options {
+ highlighter: shiki.Highlighter;
+}
+
+export const rehypePluginShiki: Plugin<[Options], Root> = ({ highlighter }) => {
+ return (tree) => {
+ visit(tree, 'element', (node, index, parent) => {
+ if (
+ node.tagName === 'pre' &&
+ node.children[0]?.type === 'element' &&
+ node.children[0].tagName === 'code'
+ ) {
+ // 语法名称，如：js， 代码内容
+ const codeNode = node.children[0];
+ const codeContent = (codeNode.children[0] as Text)?.value || '';
+ const codeClassName = codeNode.properties.className.toString() || '';
+ const lang = codeClassName.replace('language-', '');
+ if (!lang) return;
+ const highlightedCode = highlighter.codeToHtml(codeContent, { lang });
+ const fragmentAst = fromHtml(highlightedCode, {
+ fragment: true
+ });
+ parent.children.splice(index, 1, ...fragmentAst.children);
+ }
+ });
+ };
+};
diff --git a/src/node/plugin-mdx/remarkPlugins/toc.ts b/src/node/plugin-mdx/remarkPlugins/toc.ts
new file mode 100644
index 0000000..2d2a286
--- /dev/null
+++ b/src/node/plugin-mdx/remarkPlugins/toc.ts
@@ -0,0 +1,64 @@
+import { Root } from 'mdast';
+import { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import Slugger from 'github-slugger';
+import { parse } from 'acorn';
+import type { Program } from 'mdast-util-mdxjs-esm';
+
+const slugger = new Slugger();
+
+interface ChildNode {
+ type: 'link' | 'text' | 'inlineCode';
+ value: string;
+ children?: ChildNode[];
+}
+
+interface TocItem {
+ id: string;
+ text: string;
+ depth: number;
+}
+
+export const remarkPluginToc: Plugin<[], Root> = () => {
+ return (tree) => {
+ const toc: TocItem[] = [];
+
+ visit(tree, 'heading', (node) => {
+ if (!node.depth || !node.children?.length) {
+ return;
+ }
+
+ // h2 ~ h4
+ if (node.depth > 1 && node.depth < 5) {
+ const originText = (node.children as ChildNode[])
+ .map((child) => {
+ switch (child.type) {
+ case 'link':
+ return child.children?.map((c) => c.value).join('') || '';
+ default:
+ return child.value;
+ }
+ })
+ .join('');
+ const id = slugger.slug(originText);
+ toc.push({
+ id,
+ text: originText,
+ depth: node.depth
+ });
+ }
+ });
+ const insertedCode = `export const toc = ${JSON.stringify(toc, null, 2)};`;
+
+ tree.children.push({
+ type: 'mdxjsEsm',
+ value: insertedCode,
+ data: {
+ estree: parse(insertedCode, {
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }) as unknown as Program
+ }
+ });
+ };
+};
diff --git a/src/node/plugin-routes/RouteService.test.ts b/src/node/plugin-routes/RouteService.test.ts
new file mode 100644
index 0000000..de34d4f
--- /dev/null
+++ b/src/node/plugin-routes/RouteService.test.ts
@@ -0,0 +1,53 @@
+import { RouteService } from './RouteService';
+import { describe, expect, test } from 'vitest';
+import path from 'path';
+import { normalizePath } from 'vite';
+
+describe('RouteService', async () => {
+ const testDir = path.resolve(__dirname, 'fixtures');
+ const routeService = new RouteService(testDir);
+ routeService.init();
+
+ test('should get route meta', () => {
+ const routeMeta = routeService.getRouteMeta().map((item) => ({
+ ...item,
+ absolutePath: item.absolutePath.replace(
+ normalizePath(testDir),
+ 'TEST_DIR'
+ )
+ }));
+ expect(routeMeta).toMatchInlineSnapshot(`
+ [
+ {
+ "absolutePath": "TEST_DIR/a.mdx",
+ "routePath": "/a",
+ },
+ {
+ "absolutePath": "TEST_DIR/guide/index.mdx",
+ "routePath": "/guide/",
+ },
+ ]
+ `);
+ });
+
+ test('should generate route code', () => {
+ const routeCode = routeService.generateRouteCode();
+ expect(routeCode).toMatchInlineSnapshot(`
+ "
+ import React from 'react'
+ import Route0 from 'E:/frontEnd/sgg/island-dev/src/node/plugin-routes/fixtures/a.mdx'
+ import Route1 from 'E:/frontEnd/sgg/island-dev/src/node/plugin-routes/fixtures/guide/index.mdx';
+ export const routes = [
+ {
+ path: '/a',
+ element: React.createElement(Route0)
+ },
+ {
+ path: '/guide/',
+ element: React.createElement(Route1)
+ }
+ ]
+ "
+ `);
+ });
+});
diff --git a/src/node/plugin-routes/RouteService.ts b/src/node/plugin-routes/RouteService.ts
new file mode 100644
index 0000000..aa4aac2
--- /dev/null
+++ b/src/node/plugin-routes/RouteService.ts
@@ -0,0 +1,70 @@
+import fastGlob from 'fast-glob';
+import path from 'node:path';
+import { normalizePath } from 'vite';
+
+interface RouteMeta {
+ routePath: string;
+ absolutePath: string;
+}
+
+export class RouteService {
+ #scanDir: string;
+ #routeData: RouteMeta[] = [];
+
+ constructor(scanDir: string) {
+ this.#scanDir = scanDir;
+ }
+
+ async init() {
+ const files = fastGlob
+ .sync(['**/*.{js,jsx,ts,tsx,md,mdx}'], {
+ cwd: this.#scanDir,
+ absolute: true,
+ ignore: ['**/build/**', '**/.island/**', '**/config.ts']
+ })
+ .sort();
+ files.forEach((file) => {
+ const fileRelativePath = normalizePath(
+ path.relative(this.#scanDir, file)
+ );
+ const routePath = this.normalizeRoutePath(fileRelativePath);
+ this.#routeData.push({
+ routePath,
+ absolutePath: file
+ });
+ });
+ }
+
+ generateRouteCode(ssr: boolean) {
+ return `
+ import React from 'react';
+ ${ssr ? '' : 'import loadable from "@loadable/component";'};
+ ${this.#routeData
+ .map((route, index) => {
+ return ssr
+ ? `import Route${index} from '${route.absolutePath}'`
+ : `const Route${index} = loadable(() => import('${route.absolutePath}'));`;
+ })
+ .join('\n')}
+ export const routes = [
+ ${this.#routeData
+ .map((route, index) => {
+ return `{
+ path: '${route.routePath}',
+ element: React.createElement(Route${index})
+ }`;
+ })
+ .join(',\n')}
+ ]
+ `;
+ }
+
+ normalizeRoutePath(raw: string) {
+ const routePath = raw.replace(/\.(.*)?$/, '').replace(/index$/, '');
+ return routePath.startsWith('/') ? routePath : `/${routePath}`;
+ }
+
+ getRouteMeta() {
+ return this.#routeData;
+ }
+}
diff --git a/src/node/plugin-routes/fixtures/a.mdx b/src/node/plugin-routes/fixtures/a.mdx
new file mode 100644
index 0000000..e69de29
diff --git a/src/node/plugin-routes/fixtures/guide/index.mdx b/src/node/plugin-routes/fixtures/guide/index.mdx
new file mode 100644
index 0000000..e69de29
diff --git a/src/node/plugin-routes/index.ts b/src/node/plugin-routes/index.ts
new file mode 100644
index 0000000..83e5115
--- /dev/null
+++ b/src/node/plugin-routes/index.ts
@@ -0,0 +1,36 @@
+import { Plugin } from 'vite';
+import { RouteService } from './RouteService';
+
+export interface Route {
+ path: string;
+ element: React.ReactElement;
+ filePath: string;
+}
+
+interface PluginOptions {
+ root: string;
+ isSSR: boolean;
+}
+
+export const CONVENTIONAL_ROUTE_ID = 'island:routes';
+
+export function pluginRoutes(options: PluginOptions): Plugin {
+ const { root } = options;
+ const routerService = new RouteService(root);
+ return {
+ name: 'island:routes',
+ resolveId(id) {
+ if (id === CONVENTIONAL_ROUTE_ID) {
+ return '\0' + CONVENTIONAL_ROUTE_ID;
+ }
+ },
+ async configResolved(config) {
+ await routerService.init();
+ },
+ async load(id) {
+ if (id === '\0' + CONVENTIONAL_ROUTE_ID) {
+ return routerService.generateRouteCode(options.isSSR);
+ }
+ }
+ };
+}
diff --git a/src/node/vitePlugins.ts b/src/node/vitePlugins.ts
new file mode 100644
index 0000000..8c4f516
--- /dev/null
+++ b/src/node/vitePlugins.ts
@@ -0,0 +1,23 @@
+import { pluginIndexHtml } from './plugin-island/indexHtml';
+import { pluginConfig } from './plugin-island/config';
+import pluginReact from '@vitejs/plugin-react';
+import { pluginRoutes } from './plugin-routes';
+import { SiteConfig } from 'shared/types';
+import { createMdxPlugins } from './plugin-mdx';
+
+export async function createVitePlugins(
+ config: SiteConfig,
+ restart?: () => Promise,
+ isSSR = false
+) {
+ return [
+ pluginIndexHtml(),
+ pluginReact({ jsxRuntime: 'automatic' }),
+ pluginConfig(config, restart),
+ pluginRoutes({
+ root: config.root,
+ isSSR
+ }),
+ await createMdxPlugins()
+ ];
+}
diff --git a/src/runtime/Content.tsx b/src/runtime/Content.tsx
new file mode 100644
index 0000000..534529a
--- /dev/null
+++ b/src/runtime/Content.tsx
@@ -0,0 +1,7 @@
+import { useRoutes } from 'react-router-dom';
+import { routes } from 'island:routes';
+
+export const Content = () => {
+ const routesElement = useRoutes(routes);
+ return routesElement;
+};
diff --git a/src/runtime/client-entry.tsx b/src/runtime/client-entry.tsx
index f6b5934..3907bab 100644
--- a/src/runtime/client-entry.tsx
+++ b/src/runtime/client-entry.tsx
@@ -1,12 +1,19 @@
import { createRoot } from 'react-dom/client';
import { App } from './app';
+import siteData from 'island:site-data';
+import { BrowserRouter } from 'react-router-dom';
function renderInBrowser() {
+ console.log(siteData);
const containerEl = document.getElementById('root');
if (!containerEl) {
throw new Error('#root element not found');
}
- createRoot(containerEl).render(
+
+ );
}
renderInBrowser();
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
new file mode 100644
index 0000000..5023640
--- /dev/null
+++ b/src/runtime/index.ts
@@ -0,0 +1 @@
+export { Content } from './Content';
diff --git a/src/runtime/ssr-entry.tsx b/src/runtime/ssr-entry.tsx
index 48f41af..de2d67c 100644
--- a/src/runtime/ssr-entry.tsx
+++ b/src/runtime/ssr-entry.tsx
@@ -1,7 +1,14 @@
import { App } from './app';
import { renderToString } from 'react-dom/server';
+import { StaticRouter } from 'react-router-dom/server';
// For ssr component render
-export function render() {
- return renderToString(
+
+ );
}
+
+export { routes } from 'island:routes';
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
new file mode 100644
index 0000000..3c3db9e
--- /dev/null
+++ b/src/shared/types/index.ts
@@ -0,0 +1,49 @@
+import { UserConfig as ViteConfiguration } from 'vite';
+
+export type NavItemWithLink = {
+ text: string;
+ link: string;
+};
+
+export interface SideBar {
+ [path: string]: SideBarGroup[];
+}
+
+export interface SideBarGroup {
+ text: string;
+ items: SideBarItem[];
+}
+
+export type SideBarItem =
+ | {
+ text: string;
+ link: string;
+ }
+ | {
+ text: string;
+ link?: string;
+ items: SideBarItem[];
+ };
+
+export interface Footer {
+ message: string;
+}
+
+export interface ThemeConfig {
+ nav?: NavItemWithLink[];
+ sidebar?: SideBar;
+ footer?: Footer;
+}
+
+export interface UserConfig {
+ title: string;
+ description: string;
+ themeConfig: ThemeConfig;
+ vite: ViteConfiguration;
+}
+
+export interface SiteConfig {
+ root: string;
+ configPath: string;
+ siteData: UserConfig;
+}
diff --git a/src/shared/types/types.d.ts b/src/shared/types/types.d.ts
new file mode 100644
index 0000000..52c3131
--- /dev/null
+++ b/src/shared/types/types.d.ts
@@ -0,0 +1,10 @@
+declare module 'island:site-data' {
+ import type { UserConfig } from 'shared/types';
+ const siteData: UserConfig;
+ export default siteData;
+}
+
+declare module 'island:routes' {
+ import type { RouteObject } from 'react-router-dom';
+ export const routes: RouteObject[];
+}
diff --git a/src/theme-default/Layout/index.tsx b/src/theme-default/Layout/index.tsx
index e94748e..e516833 100644
--- a/src/theme-default/Layout/index.tsx
+++ b/src/theme-default/Layout/index.tsx
@@ -1,14 +1,11 @@
import { useState } from 'react';
+import { Content } from '@runtime';
export function Layout() {
- const [count, setCount] = useState(0);
return (
-
This is Layout Component
-
- {count}
- setCount(count + 1)}>Add Count
-
+
Common Content
+