feat: add nomodule polyfill

Author: Je

aleph.ts

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 import React, { ComponentType, useCallback, useEffect, useRef, useState } from 'https://esm.sh/react'
 import { DataContext, RouterContext } from './context.ts'
 import { E404Page, E501App, E501Page, ErrorBoundary } from './error.ts'
@@ -72,7 +71,7 @@ export function ALEPH({ initial }: {
             }, pageProps)
             setPage({ url, pageProps })
             if (util.isInt(e.scrollTo)) {
-                window.scrollTo(e.scrollTo, 0)
+                (window as any).scrollTo(e.scrollTo, 0)
             }
         } else {
             setPage({ url, pageProps: null })

html.ts

@@ -9,7 +9,7 @@ export function createHtml({
 }: {
     lang?: string,
     head?: string[],
-    scripts?: (string | { id?: string, type?: string, src?: string, innerText?: string, async?: boolean, preload?: boolean })[],
+    scripts?: (string | { id?: string, type?: string, src?: string, innerText?: string, nomodule?: boolean, async?: boolean, preload?: boolean })[],
     body: string,
     minify?: boolean
 }) {

polyfill.ts

@@ -0,0 +1,29 @@
+export const nomoduleJS = (isDev: boolean) => {
+    const indent = isDev ? '     ' : ''
+    const eol = isDev ? '\n' : ''
+    let title = 'Your browser is out of date.'
+    let desc = 'Update your browser for more security, speed and the best experience on this site.'
+    if (isDev) {
+        desc = 'Aleph.js requires <a href="https://caniuse.com/es6-module" style="font-weight:500;color:#000;">ES module</a> support during development.'
+    }
+    return [
+        ``,
+        `var el = document.querySelector("main");`,
+        `var style = {`,
+        `${indent}position: "fixed",`,
+        `${indent}top: "50%",`,
+        `${indent}left: "5%",`,
+        `${indent}width: "90%",`,
+        `${indent}height: "24px",`,
+        `${indent}marginTop: "-12px",`,
+        `${indent}lineHeight: "24px",`,
+        `${indent}fontSize: "14px",`,
+        `${indent}color: "#666",`,
+        `${indent}textAlign: "center"`,
+        '};',
+        `el.innerHTML = '<p><strong style="font-size:24px;font-weight:700;color:#000;">${title}</strong><br>${desc}</p>';`,
+        `for (var key in style) {`,
+        `${indent}el.style[key] = style[key];`,
+        `}`,
+    ].join(eol + indent.repeat(2)) + eol + indent
+}

project.ts

@@ -5,6 +5,7 @@ import { AlephAPIRequest, AlephAPIResponse } from './api.ts'
 import { EventEmitter } from './events.ts'
 import { createHtml } from './html.ts'
 import log from './log.ts'
+import { nomoduleJS } from './polyfill.ts'
 import { Routing } from './router.ts'
 import { colors, ensureDir, path, ServerRequest, Sha1, walk } from './std.ts'
 import { compile } from './tsc/compile.ts'
@@ -193,8 +194,8 @@ export class Project {
             lang: url.locale,
             head: head,
             scripts: [
-                // { type: 'application/json', id: 'ssr-data', innerText: JSON.stringify({ url }) },
                 { src: path.join(baseUrl, `/_aleph/main.${mainModule.hash.slice(0, hashShort)}.js`), type: 'module' },
+                { innerText: nomoduleJS(this.isDev), nomodule: true },
             ],
             body,
             minify: !this.isDev
@@ -209,6 +210,7 @@ export class Project {
             lang: defaultLocale,
             scripts: [
                 { src: path.join(baseUrl, `/_aleph/main.${mainModule.hash.slice(0, hashShort)}.js`), type: 'module' },
+                { innerText: nomoduleJS(this.isDev), nomodule: true },
             ],
             body: `<main></main>`,
             minify: !this.isDev
@@ -220,7 +222,7 @@ export class Project {
         const mod = this.#modules.get('/data.js')
         if (mod) {
             try {
-                const { default: Data } = await import("file://" + mod.jsFile)
+                const { default: Data } = await import('file://' + mod.jsFile)
                 let data: any = Data
                 if (util.isFunction(Data)) {
                     data = await Data()
@@ -334,7 +336,7 @@ export class Project {
                         log.fatal('parse config.json:', e.message)
                     }
                 } else {
-                    const { default: conf } = await import("file://" + p)
+                    const { default: conf } = await import('file://' + p)
                     if (util.isPlainObject(conf)) {
                         Object.assign(config, conf)
                         log.debug(name, config)