methanol 0.0.12 → 0.0.13

package/README.md

@@ -2,7 +2,7 @@
 
 Opinionated MDX-first static site generator powered by rEFui + Vite.
 
-For full documentation and examples, visit [Methanol Docs](https://methanol.netlify.app/).
+For full documentation and examples, visit [Methanol Docs](https://methanol.sudomaker.com/).
 
 ## Quick start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "methanol",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Static site generator powered by rEFui and MDX",
   "main": "./index.js",
   "type": "module",
@@ -36,7 +36,7 @@
     "hast-util-is-element": "^3.0.0",
     "json5": "^2.2.3",
     "null-prototype-object": "^1.2.5",
-    "refui": "^0.16.3",
+    "refui": "^0.16.4",
     "refurbish": "^0.1.8",
     "rehype-slug": "^6.0.0",
     "rehype-starry-night": "^2.2.0",

package/src/build-system.js

@@ -78,7 +78,7 @@ export const buildHtmlEntries = async () => {
 	if (themeComponentsDir) {
 		await buildComponentRegistry({
 			componentsDir: themeComponentsDir,
-			client: themeEnv.client
+			register: themeEnv.register
 		})
 	}
 	await buildComponentRegistry()

package/src/components.js

@@ -48,21 +48,24 @@ export const bumpComponentImportNonce = () => {
 }
 
 export const reframeEnv = env()
-export const client = reframeEnv.client
+export const register = reframeEnv.register
 export const invalidateRegistryEntry = reframeEnv.invalidate
 export const genRegistryScript = reframeEnv.genRegistryScript
 
-const resolveComponentExport = (componentPath, ext) => {
+const resolveComponentExport = (componentPath, exportName, ext) => {
 	const staticCandidate = `${componentPath}.static${ext}`
 	const clientCandidate = `${componentPath}.client${ext}`
 	const genericCandidate = `${componentPath}${ext}`
-	const ret = {}
+	const ret = { exportName }
+
 	if (existsSync(staticCandidate)) {
 		ret.staticPath = staticCandidate
 	}
+
 	if (existsSync(clientCandidate)) {
 		ret.clientPath = clientCandidate
 	}
+
 	if (!ret.staticPath) {
 		if (existsSync(genericCandidate)) {
 			ret.staticPath = genericCandidate
@@ -70,34 +73,29 @@ const resolveComponentExport = (componentPath, ext) => {
 			ret.staticPath = clientCandidate
 		}
 	}
-	return ret
-}
 
-export const buildComponentEntry = async ({ dir, exportName, ext, client: clientFn = client }) => {
-	const info = resolveComponentExport(join(dir, exportName), ext)
-	if (!info.staticPath) {
-		return { component: null, hasClient: false, staticPath: null, clientPath: null }
+	if (ret.staticPath) {
+		ret.staticImportURL = `${pathToFileURL(ret.staticPath).href}?t=${componentImportNonce}`
 	}
 
-	let component = (await import(`${pathToFileURL(info.staticPath).href}?t=${componentImportNonce}`)).default
+	return ret
+}
 
-	if (!component) {
+export const buildComponentEntry = async ({ dir, exportName, ext, register: registerFn = register }) => {
+	const info = resolveComponentExport(join(dir, exportName), exportName, ext)
+	if (!info.staticPath) {
 		return { component: null, hasClient: false, staticPath: null, clientPath: null }
 	}
 
-	if (info.clientPath) {
-		component = clientFn({ ...info, staticComponent: component, exportName })
-	}
-
 	return {
-		component,
+		component: registerFn(info),
 		hasClient: Boolean(info.clientPath),
 		staticPath: info.staticPath,
 		clientPath: info.clientPath || null
 	}
 }
 
-export const buildComponentRegistry = async ({ componentsDir = state.COMPONENTS_DIR, client: clientFn = client } = {}) => {
+export const buildComponentRegistry = async ({ componentsDir = state.COMPONENTS_DIR, register: registerFn = register } = {}) => {
 	const components = {}
 	const sources = new Map()
 
@@ -130,7 +128,7 @@ export const buildComponentRegistry = async ({ componentsDir = state.COMPONENTS_
 				dir,
 				exportName,
 				ext: extname(entry),
-				client: clientFn
+				register: registerFn
 			})
 			if (!component) continue
 			components[exportName] = component

package/src/dev-server.js

@@ -129,7 +129,7 @@ export const runViteDev = async () => {
 	const themeRegistry = themeComponentsDir
 		? await buildComponentRegistry({
 				componentsDir: themeComponentsDir,
-				client: themeEnv.client
+				register: themeEnv.register
 			})
 		: { components: {} }
 	const themeComponents = {

package/src/mdx.js

@@ -40,16 +40,9 @@ import { linkResolve } from './rehype-plugins/link-resolve.js'
 // Workaround for Vite: it doesn't support resolving module/virtual modules in script src in dev mode
 const resolveRewindInject = () =>
 	HTMLRenderer.rawHTML(`<script type="module" src="${withBase('/.methanol_virtual_module/inject.js')}"></script>`)
-const RWND_FALLBACK = HTMLRenderer.rawHTML`<script>
-	if (!window.$$rfrm) {
-		const l = []
-		const r = function(k,i,p) {
-			l.push([k,i,p,document.currentScript])
-		}
-		r.$$loaded = l
-		window.$$rfrm = r
-	}
-</script>`
+const RWND_FALLBACK = HTMLRenderer.rawHTML(
+	'<script>if(!window.$$rfrm){var l=[];var r=function(k,i,p){l.push([k,i,p,document.currentScript])};r.$$loaded=l;window.$$rfrm=r}</script>'
+)
 
 let cachedHeadAssets = null
 
@@ -331,6 +324,7 @@ export const compilePageMdx = async (page, pagesContext, options = {}) => {
 			pagesContext,
 			lazyPagesTree
 		})
+	page.mdxCtx = activeCtx
 	const mdxModule = compiled?.code
 		? await runMdxSource({
 				code: compiled.code,
@@ -373,55 +367,52 @@ export const renderHtml = async ({ routePath, path, components, pagesContext, pa
 
 	await compilePageMdx(pageMeta, pagesContext, { ctx })
 
+	const [Head, Outlet] = createPortal()
+	const ExtraHead = () => {
+		return [
+			resolveRewindInject(),
+			...resolveUserHeadAssets(),
+			...resolvePageHeadAssets(pageMeta),
+			Outlet(),
+			RWND_FALLBACK
+		]
+	}
+
+	const PageContent = ({ components: extraComponents, ...props }, ...children) =>
+		mdxComponent({
+			children,
+			...props,
+			components: {
+				...components,
+				...extraComponents,
+				head: Head,
+				Head
+			}
+		})
+
 	const template = state.USER_THEME.template
 	const mdxComponent = pageMeta.mdxComponent
 
 	const renderResult = await new Promise((resolve, reject) => {
-		const [Head, Outlet] = createPortal()
-		const ExtraHead = () => {
-			return [
-				resolveRewindInject(),
-				...resolveUserHeadAssets(),
-				...resolvePageHeadAssets(pageMeta),
-				Outlet(),
-				RWND_FALLBACK
-			]
-		}
-
-		const PageContent = ({ components: extraComponents, ...props }, ...children) => {
-			try {
-				return mdxComponent({
-					children,
-					...props,
-					components: {
-						...components,
-						...extraComponents,
-						head: Head,
-						Head
-					}
-				})
-			} catch (e) {
-				reject(e)
-			}
-		}
-
 		const result = HTMLRenderer.c(
 			Suspense,
 			{
 				onLoad() {
 					nextTick(() => resolve(result))
+				},
+				catch({ error }) {
+					reject(error)
 				}
 			},
-			() =>
-				template({
-					ctx,
-					page: ctx.page,
-					withBase,
-					PageContent,
-					ExtraHead,
-					HTMLRenderer,
-					components
-				})
+			template({
+				ctx,
+				page: ctx.page,
+				withBase,
+				PageContent,
+				ExtraHead,
+				HTMLRenderer,
+				components
+			})
 		)
 	})
 

package/src/reframe.js

@@ -18,6 +18,7 @@
  * under the License.
  */
 
+import { lazy } from 'refui'
 import fnv1a from '@sindresorhus/fnv1a'
 import JSON5 from 'json5'
 
@@ -45,8 +46,12 @@ export function env(parentEnv) {
 
 	let renderCount = 0
 
-	function client(info) {
-		const { clientPath, staticComponent, exportName } = info
+	function register(info) {
+		const { clientPath, staticPath, staticImportURL, exportName } = info
+
+		if (!clientPath) {
+			return lazy(() => import(staticImportURL))
+		}
 
 		let key = null
 		let _clientPath = clientPath
@@ -55,7 +60,9 @@ export function env(parentEnv) {
 			key = hash(_clientPath)
 		} while (keyPathRegistry[key] && keyPathRegistry[key] !== clientPath)
 
-		const component = ({ children: childrenProp, ...props }, ...children) => {
+		const component = async ({ children: childrenProp, ...props }, ...children) => {
+			const staticComponent = (await import(staticImportURL)).default
+
 			const id = renderCount++
 			const idStr = id.toString(16)
 			const script = `$$rfrm(${JSON.stringify(key)},${id},${Object.keys(props).length ? JSON5.stringify(props) : '{}'})`
@@ -63,13 +70,13 @@ export function env(parentEnv) {
 			return (R) => {
 				return [
 					R.createAnchor(`{${idStr}}`, true),
-					R.c(
+					staticComponent ? R.c(
 						staticComponent,
 						props,
 						R.createAnchor(`[${idStr}[`, true),
 						...children,
 						R.createAnchor(`]${idStr}]`, true)
-					),
+					): null,
 					R.c('script', null, R.rawHTML(script))
 				]
 			}
@@ -106,7 +113,7 @@ export function env(parentEnv) {
 	}
 
 	return {
-		client,
+		register,
 		invalidate,
 		genRegistryScript,
 		setParent,

package/src/stage-logger.js

@@ -41,7 +41,8 @@ export const createStageLogger = (enabled) => {
 		}
 		const padding = lastLength > text.length ? ' '.repeat(lastLength - text.length) : ''
 		const clearLine = '\u001b[2K'
-		process.stdout.write(`${clearLine}\r${text}${padding}${newline ? '\n' : ''}`)
+		const reset = '\x1b[0m'
+		process.stdout.write(`${clearLine}\r${reset}${text}${reset}${padding}${newline ? '\n' : ''}`)
 		lastLength = text.length
 	}
 	const start = (label) => {

package/src/workers/build-worker.js

@@ -46,7 +46,7 @@ const ensureInit = async () => {
 		const themeRegistry = themeComponentsDir
 			? await buildComponentRegistry({
 					componentsDir: themeComponentsDir,
-					client: themeEnv.client
+					register: themeEnv.register
 				})
 			: { components: {} }
 		const themeComponents = {
@@ -71,6 +71,30 @@ const rebuildPagesContext = async (excludedRoutes, excludedDirs) => {
 	})
 }
 
+const refreshMdxCtx = (page) => {
+	if (!page?.mdxCtx || !pagesContext) return
+	const ctx = page.mdxCtx
+	ctx.page = page
+	ctx.pages = pagesContext.pages || []
+	ctx.pagesByRoute = pagesContext.pagesByRoute || new Map()
+	ctx.languages = pagesContext.languages || []
+	ctx.language = pagesContext.getLanguageForRoute
+		? pagesContext.getLanguageForRoute(page.routePath)
+		: null
+	ctx.site = pagesContext.site || null
+	ctx.getSiblings = pagesContext.getSiblings
+		? () => pagesContext.getSiblings(page.routePath, page.path)
+		: null
+	if (page && ctx.getSiblings && page.getSiblings !== ctx.getSiblings) {
+		page.getSiblings = ctx.getSiblings
+	}
+	if (pagesContext.getPagesTree) {
+		ctx.pagesTree = pagesContext.getPagesTree(page.routePath)
+	} else {
+		ctx.pagesTree = pagesContext.pagesTree || []
+	}
+}
+
 const serializeError = (error) => {
 	if (!error) return 'Unknown error'
 	if (error.stack) return error.stack
@@ -112,6 +136,10 @@ const handleSyncUpdates = async (message) => {
 		excludedRoutes ? new Set(excludedRoutes) : pagesContext?.excludedRoutes || new Set(),
 		excludedDirs ? new Set(excludedDirs) : pagesContext?.excludedDirs || new Set()
 	)
+	for (const page of pages) {
+		if (!page?.mdxCtx) continue
+		refreshMdxCtx(page)
+	}
 }
 
 const handleCompile = async (message) => {

package/themes/default/components/ThemeAccentSwitch.static.jsx

@@ -18,6 +18,6 @@
  * under the License.
  */
 
-export default function () {
-	// render nothing on server side
-}
+// Nothing needs to be rendered on the server side for accent switch
+// But we explicitly need to keep a file here to prevent Methanol from
+// rendering the client version as fallback

package/themes/default/components/ThemeColorSwitch.static.jsx

@@ -18,6 +18,6 @@
  * under the License.
  */
 
-export default function () {
-	// render nothing on server side
-}
+// Nothing needs to be rendered on the server side for accent switch
+// But we explicitly need to keep a file here to prevent Methanol from
+// rendering the client version as fallback

package/themes/default/components/pre.client.jsx

@@ -38,7 +38,7 @@ export default function (props, ...children) {
 		}
 	}
 
-	const Btn = copied.choose(
+	const BtnImg = copied.choose(
 		() => (
 			<svg
 				attr:width="14"
@@ -74,7 +74,7 @@ export default function (props, ...children) {
 	return (
 		<div class="code-block-container">
 			<button class="copy-btn" on:click={copy} attr:aria-label="Copy code">
-				<Btn />
+				<BtnImg />
 			</button>
 			<pre {...props} $ref={el}>
 				{...children}

package/themes/default/{public → sources}/theme-prepare.js

@@ -29,7 +29,7 @@
 	if (savedAccent && savedAccent !== 'default') {
 		document.documentElement.classList.add('accent-' + savedAccent)
 	}
-})()
+})
 ;(function initPrefetch() {
 	const prefetched = new Set()
 	const canPrefetch = (anchor) => {
@@ -58,4 +58,5 @@
 		document.head.appendChild(link)
 	}
 	document.addEventListener('pointerover', onHover, { capture: true, passive: true })
-})()
+})
+console.log('theme prep')

package/themes/default/src/page.jsx

@@ -22,7 +22,7 @@ import { HTMLRenderer as R, DOCTYPE_HTML } from 'methanol'
 import { renderToc } from '../components/ThemeToCContainer.static.jsx'
 import { renderNavTree } from './nav-tree.jsx'
 
-const PAGE_TEMPLATE = async ({ PageContent, ExtraHead, components, ctx }) => {
+const PAGE_TEMPLATE = ({ PageContent, ExtraHead, components, ctx }) => {
 	const page = ctx.page
 	const pagesByRoute = ctx.pagesByRoute
 	const pages = ctx.pages || []
@@ -122,13 +122,13 @@ const PAGE_TEMPLATE = async ({ PageContent, ExtraHead, components, ctx }) => {
 					{twitterTitle ? <meta name="twitter:title" content={twitterTitle} /> : null}
 					{twitterDescription ? <meta name="twitter:description" content={twitterDescription} /> : null}
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
-					<ExtraHead />
 					<link
 						rel="preload stylesheet"
 						as="style"
 						href="/.methanol_theme_default/style.css"
 					/>
-					<script src="/theme-prepare.js"></script>
+					<script type="module" src="/.methanol_theme_default/theme-prepare.js"></script>
+					<ExtraHead />
 				</head>
 				<body>
 					<input type="checkbox" id="nav-toggle" class="nav-toggle" />