mizchi / Trans Loader
webpack-less frontend with service-worker
Stars: ✭ 100
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Trans Loader
Productivity Frontend
Productivity Application - Kanban Style Productivity Management Application with Customizable Boards, Lists and Cards to Make You More Productive.
Stars: ✭ 234 (+134%)
Mutual labels: babel, service-worker
Twreporter React
twreporter site with nodejs
Stars: ✭ 263 (+163%)
Mutual labels: babel, service-worker
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+871%)
Mutual labels: babel, service-worker
Angular2 Hn
💥 Progressive Hacker News client built with Angular
Stars: ✭ 1,293 (+1193%)
Mutual labels: service-worker
Offline Gallery
🎈 A 16kb Preact & Redux based Progressive Web App that offers an offline gallery experience of external images.
Stars: ✭ 90 (-10%)
Mutual labels: service-worker
Jekyll Rtd Theme
Just another documentation theme compatible with GitHub Pages
Stars: ✭ 92 (-8%)
Mutual labels: service-worker
Vue3 Sfc Loader
Vue3 Single File Component loader for Vue2 and Vue3. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.
Stars: ✭ 95 (-5%)
Mutual labels: babel
Shortstack
🥞 minimal Rollup + PostCSS modern syntax starter template
Stars: ✭ 94 (-6%)
Mutual labels: babel
Code2race
Solve the problem. 😊 If you like ❤ give us a star⭐. HACKTOBERFEST
Stars: ✭ 91 (-9%)
Mutual labels: babel
Babel Plugin React Persist
Automatically useCallback() & useMemo(); memoize inline functions
Stars: ✭ 91 (-9%)
Mutual labels: babel
Broccoli Serviceworker
ServiceWorker generator for Broccoli and Ember.js
Stars: ✭ 93 (-7%)
Mutual labels: service-worker
Forge Node App
🛠📦🎉 Generate Node.js boilerplate with optional libraries & tools
Stars: ✭ 90 (-10%)
Mutual labels: babel
Next Offline
make your Next.js application work offline using service workers via Google's workbox
Stars: ✭ 1,306 (+1206%)
Mutual labels: 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"));
package.json
's version
Example 4: Loading with 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].