mizchi/trans-loader

webpack-less frontend with service-worker

trans-loader

You don't need npm and bundler.

You need just a service-worker script.

What this script does...

• Transform .js with babel on service-worker
• Transform .ts and .tsx with typescript on service-worker
• Load modules from jspm.io and cache them on serviceWorker.

CAUTION!

• development only. Do not use for production.
• It works only for modern browser(ES2015+ and ES Modules ready).

How to use

Put dist/sw.js as /sw.js on your app root.

wget https://raw.githubusercontent.com/mizchi/trans-loader/master/dist/sw.js

Rewrite your entry js like below.

Before

<script src="/src/main.js"></script>

After

<script type=module>
(async () => {
  const run = () => import('/src/main.js') // your entry js
  if (navigator.serviceWorker.controller) {
    run()
  } else {
    const reg = await navigator.serviceWorker.register("/sw.js");
    await navigator.serviceWorker.ready;
    navigator.serviceWorker.addEventListener('controllerchange', run)
  }
})()
</script>

See working demo

Example 1: Compiled with babel

// /your-entry.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello</h1>, document.querySelector(".root"));

Example 2: Load relative file

index.html
sw.js
src/main.js
src/components/App.js

// main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.querySelector(".root"));

Example 3: Load typescript

index.html
sw.js
src/main.js
src/components/App.tsx

// main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.querySelector(".root"));

Example 4: Loading with package.json's version

index.html
sw.js
package.json
src/main.js

package.json

{
  "dependencies": {
    "react": "16.4.1",
    "react-dom": "16.4.1"
  }
}

Log

trans-loader: Cache https://dev.jspm.io/[email protected]
trans-loader: Cache https://dev.jspm.io/[email protected]

How it works

Rewrite js content with service-worker proxy

Compile content with babel/typescript by extname

// ...
self.addEventListener("fetch", (event: any) => {
  if (event.request.url.indexOf("dev.jspm.io") > -1) {
    // cache jspm result
    event.respondWith(useCacheOrLoad(event.request));
  } else if (event.request.url.indexOf("/src/") > -1) {
    // transform
    console.log("trans-loader: with-transform", event.request.url);
    event.respondWith(respondWithTransform(event.request.url));
  }
});

Rewrite to dev.jspm.io

Rewrite npm module path to dev.jspm.io. See this code

// before
import React from "react";
// after
import React from "https://dev.jspm.io/react";

Add valid extname

• Try to access .js, .mjs, .ts, .tsx, /index.js, /index.ts, /index.tsx
• return file with non-error endpoint

LICENSE

MIT

trans-loader's Issues

Use webpack.config.js to define loading behavior

Just idea.

Emulatable feature.

• resolve.extension
• resolve.alias
• module.rules
  • file-loader
  • style-loader
  • css-modules?

Custom build documentation

Reusable code modularization and documentation

typescript extension resolver

.ts and .tsx

This could be resolved by Promise.race

Pormise.race([
  fetch('/a.js'),
  fetch('/a.ts'),
  fetch('/a.tsx')
])