refactor: improve nomodule polyfill

Author: Je

nomodule.js

@@ -0,0 +1,34 @@
+var el = document.createElement('div')
+var style = {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    zIndex: '999',
+    width: '100%',
+    margin: '0',
+    padding: '30px 0',
+    lineHeight: '1.5',
+    fontSize: '14px',
+    color: '#666',
+    backgroundColor: '#fff9cc',
+    textAlign: 'center',
+    boxShadow: '0 1px 5px rgba(0,0,0,0.1)'
+}
+for (var key in style) {
+    el.style[key] = style[key]
+}
+var scripts = document.getElementsByTagName('script')
+var isDev = false
+for (let i = 0; i < scripts.length; i++) {
+    const s = scripts[i]
+    if (/nomodule\.js\?dev$/.test(s.src)) {
+        isDev = true
+    }
+}
+el.innerHTML = '<h2 style="margin:0;paddding:0;line-height:1;font-size:24px;font-weight:700;color:#000;">Your browser is out of date.</h2>'
+if (!isDev) {
+    el.innerHTML += '<p>Aleph.js requires <a href="https://caniuse.com/es6-module" style="font-weight:500;color:#000;">ES module</a> support during development.</p>'
+} else {
+    el.innerHTML += '<p>Update your browser for more security, speed and the best experience on this site.</p>'
+}
+document.body.appendChild(el)

polyfill.ts

@@ -5,7 +5,6 @@ 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'
@@ -195,7 +194,7 @@ export class Project {
             head: head,
             scripts: [
                 { src: path.join(baseUrl, `/_aleph/main.${mainModule.hash.slice(0, hashShort)}.js`), type: 'module' },
-                { innerText: nomoduleJS(this.isDev), nomodule: true },
+                { src: path.join(baseUrl, `/_aleph/-/deno.land/x/aleph/nomodule.js${this.isDev ? '?dev' : ''}`), nomodule: true },
             ],
             body,
             minify: !this.isDev
@@ -210,7 +209,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 },
+                { src: path.join(baseUrl, `/_aleph/-/deno.land/x/aleph/nomodule.js${this.isDev ? '?dev' : ''}`), nomodule: true },
             ],
             body: `<main></main>`,
             minify: !this.isDev
@@ -441,6 +440,7 @@ export class Project {
         const precompileUrls = [
             'https://deno.land/x/aleph/bootstrap.ts',
             'https://deno.land/x/aleph/renderer.ts',
+            'https://deno.land/x/aleph/nomodule.js',
             'https://deno.land/x/aleph/tsc/tslib.js',
         ]
         if (this.isDev) {