vite-plugin-react18-pages
Version:
<p> <a href="https://www.npmjs.com/package/vite-plugin-react-pages" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/vite-plugin-react-pages.svg" alt="npm package" /></a> </p>
246 lines • 11.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultFileHandler = exports.DefaultPageStrategy = exports.PageStrategy = exports.File = exports.extractStaticData = void 0;
const path = __importStar(require("path"));
const fs_extra_1 = __importDefault(require("fs-extra"));
const DefaultPageStrategy_1 = require("./page-strategy/DefaultPageStrategy");
Object.defineProperty(exports, "DefaultPageStrategy", { enumerable: true, get: function () { return DefaultPageStrategy_1.DefaultPageStrategy; } });
Object.defineProperty(exports, "defaultFileHandler", { enumerable: true, get: function () { return DefaultPageStrategy_1.defaultFileHandler; } });
const pageUtils_1 = require("./page-strategy/pageUtils");
const page_strategy_1 = require("./page-strategy");
Object.defineProperty(exports, "PageStrategy", { enumerable: true, get: function () { return page_strategy_1.PageStrategy; } });
const theme_1 = require("./virtule-module-plugins/theme");
const demo_modules_1 = require("./virtule-module-plugins/demo-modules");
const ts_info_module_1 = require("./virtule-module-plugins/ts-info-module");
const injectHTMLTag_1 = require("./utils/injectHTMLTag");
const virtual_module_1 = require("./utils/virtual-module");
const mdx_plugin_image_1 = require("./utils/mdx-plugin-image");
const mdx_plugin_file_text_1 = require("./utils/mdx-plugin-file-text");
/**
* This is a public API that users use in their index.html.
* Changing this would introduce breaking change for users.
*/
const appEntryId = '/@pages-infra/main.js';
/**
* This is a private prefix an users should not use them
*/
const modulePrefix = '/@react-pages/';
const pagesModuleId = modulePrefix + 'pages';
const themeModuleId = modulePrefix + 'theme';
const ssrDataModuleId = modulePrefix + 'ssrData';
const tsInfoQueryReg = /\?tsInfo=(.*)$/;
function pluginFactory(opts = {}) {
const { useHashRouter = false, staticSiteGeneration } = opts;
let isBuild;
let pagesDir;
let pageStrategy;
/** used as data source for PageStrategy and other dynamic-modules */
const virtualModulesManager = new virtual_module_1.VirtualModulesManager();
const demoModuleManager = new demo_modules_1.DemoModuleManager();
const tsInfoModuleManager = new ts_info_module_1.TsInfoModuleManager();
return {
name: 'vite-plugin-react18-pages',
enforce: 'pre',
config: () => ({
optimizeDeps: {
include: ['react', 'react-dom', 'react-router-dom', '@mdx-js/react'],
exclude: ['vite-plugin-react18-pages'],
},
define: {
__HASH_ROUTER__: !!useHashRouter,
},
build: {
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
}),
configResolved({ root, plugins, logger, command }) {
var _a;
isBuild = command === 'build';
pagesDir = (_a = opts.pagesDir) !== null && _a !== void 0 ? _a : path.resolve(root, 'pages');
if (opts.pageStrategy) {
pageStrategy = opts.pageStrategy;
}
else {
pageStrategy = new DefaultPageStrategy_1.DefaultPageStrategy();
}
const mdxPlugin = plugins.find((plugin) => plugin.name === 'vite-plugin-mdx');
if (mdxPlugin === null || mdxPlugin === void 0 ? void 0 : mdxPlugin.mdxOptions) {
// Inject demo transformer
mdxPlugin.mdxOptions.remarkPlugins.push(...getRemarkPlugins(root));
}
else {
logger.warn('[react-pages] Please install vite-plugin-mdx@3.1 or higher');
}
},
configureServer({ watcher, moduleGraph }) {
const reloadVirtualModule = (moduleId) => {
const module = moduleGraph.getModuleById(moduleId);
if (module) {
moduleGraph.invalidateModule(module);
watcher.emit('change', moduleId);
}
};
pageStrategy
.on('page-list', () => reloadVirtualModule(pagesModuleId))
.on('page', (pageIds) => {
pageIds.forEach((pageId) => {
reloadVirtualModule(pagesModuleId + pageId);
});
});
demoModuleManager.onUpdate(reloadVirtualModule);
tsInfoModuleManager.onUpdate(reloadVirtualModule);
},
buildStart() {
// buildStart may be called multiple times
// if the port has already been taken and vite retry with another port
// pageStrategy.start can't be put in configResolved
// because vite's resolveConfig will call configResolved without calling close hook
pageStrategy.start(pagesDir, virtualModulesManager);
},
async resolveId(id, importer) {
if (id === appEntryId)
return id;
if (id.startsWith(modulePrefix))
return id;
// TODO
if (id.endsWith('?demo')) {
const bareImport = id.slice(0, 0 - '?demo'.length);
const resolved = await this.resolve(bareImport, importer);
if (!resolved || resolved.external)
throw new Error(`can not resolve demo: ${id}. importer: ${importer}`);
return demoModuleManager.registerProxyModule(resolved.id);
}
const matchTsInfo = id.match(tsInfoQueryReg);
if (matchTsInfo) {
const bareImport = id.replace(tsInfoQueryReg, '');
const resolved = await this.resolve(bareImport, importer);
if (!resolved || resolved.external)
throw new Error(`can not resolve tsInfo: ${id}. importer: ${importer}`);
const exportName = matchTsInfo[1];
return tsInfoModuleManager.registerProxyModule(resolved.id, exportName);
}
return undefined;
},
async load(id) {
// vite will resolve it with v=${versionHash} query
// so that this import can be cached
if (id === appEntryId)
return `import "vite-plugin-react18-pages/dist/client/client/main.js";`;
// page list
if (id === pagesModuleId) {
return (0, pageUtils_1.renderPageList)(await pageStrategy.getPages(), isBuild);
}
// one page data
if (id.startsWith(pagesModuleId + '/')) {
let pageId = id.slice(pagesModuleId.length);
if (pageId === '/index__')
pageId = '/';
const page = await pageStrategy.getPage(pageId);
if (!page) {
throw Error(`Page not found: ${pageId}`);
}
return (0, pageUtils_1.renderOnePageData)(page.data);
}
if (id === themeModuleId) {
return `export { default } from "${await (0, theme_1.resolveTheme)(pagesDir)}";`;
}
if (id === ssrDataModuleId) {
return (0, pageUtils_1.renderPageListInSSR)(await pageStrategy.getPages());
}
if (demoModuleManager.isProxyModuleId(id)) {
return demoModuleManager.loadProxyModule(id);
}
if (tsInfoModuleManager.isProxyModuleId(id)) {
return tsInfoModuleManager.loadProxyModule(id);
}
},
// @ts-expect-error
vitePagesStaticSiteGeneration: staticSiteGeneration,
closeBundle() {
virtualModulesManager.close();
demoModuleManager.close();
tsInfoModuleManager.close();
},
transformIndexHtml(html, ctx) {
return moveScriptTagToBodyEnd(html, ctx);
},
};
}
exports.default = pluginFactory;
var virtual_module_2 = require("./utils/virtual-module");
Object.defineProperty(exports, "extractStaticData", { enumerable: true, get: function () { return virtual_module_2.extractStaticData; } });
Object.defineProperty(exports, "File", { enumerable: true, get: function () { return virtual_module_2.File; } });
function getRemarkPlugins(root) {
const result = [
demo_modules_1.DemoMdxPlugin,
ts_info_module_1.TsInfoMdxPlugin,
mdx_plugin_image_1.ImageMdxPlugin,
mdx_plugin_file_text_1.FileTextMdxPlugin,
];
const pkgJsonPath = path.join(root, 'package.json');
// TODO: user may put the whole vite-pages project
// under a sub folder (which is the root here),
// so the package.json will be located at the upper folder.
// checkout playground/custom-find-pages2.
const hasPkgJson = fs_extra_1.default.pathExistsSync(pkgJsonPath);
// Inject frontmatter parser if missing
const { devDependencies = {}, dependencies = {} } = hasPkgJson
? require(pkgJsonPath)
: {};
// By default we add remark-frontmatter automatically.
// But if user install their own remark-frontmatter,
// they are responsible to add the plugin manually
// (they may provide some config to it)
if (!devDependencies['remark-frontmatter'] &&
!dependencies['remark-frontmatter']) {
result.push(require('remark-frontmatter'));
}
return result;
}
/**
* vite put script before style, which cause style problem for antd
* so we move the script tag to the end of the body
* https://github.com/vitejs/vite/blob/4112c5d103673b83c50d446096086617dfaac5a3/packages/vite/src/node/plugins/html.ts#L352
*/
function moveScriptTagToBodyEnd(html, ctx) {
if (ctx.chunk) {
const reg = new RegExp(`<script\\s[^>]*?${ctx.chunk.fileName}[^<]*?<\\/script>`);
const match = html.match(reg);
if (match) {
const script = match[0];
html = html.replace(script, '');
return (0, injectHTMLTag_1.injectHTMLTag)(html, script);
}
}
}
//# sourceMappingURL=index.js.map