├── .gitignore
├── README.md
├── demo
├── README.md
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── App.js
│ │ ├── ReduxExample.tsx
│ │ └── Sub.tsx
│ ├── foo.ts
│ └── main.js
└── yarn.lock
├── dist
└── sw.js
├── package.json
├── src
├── compilers.js
├── dummy.js
├── ensurePackage.ts
├── index.ts
├── processor.ts
├── rewriteModulePath.js
├── transformers.ts
└── types.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | ### https://raw.github.com/github/gitignore/160d27e2bebf784c4f4a1e070df057f3868b62bc/Node.gitignore
2 |
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # node-waf configuration
27 | .lock-wscript
28 |
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 |
32 | # Dependency directories
33 | node_modules
34 | jspm_packages
35 |
36 | # Optional npm cache directory
37 | .npm
38 |
39 | # Optional eslint cache
40 | .eslintcache
41 |
42 | # Optional REPL history
43 | .node_repl_history
44 |
45 | # Output of 'npm pack'
46 | *.tgz
47 |
48 | # Yarn Integrity file
49 | .yarn-integrity
50 |
51 | /app/*
52 | !/app/index.html
53 | demo/sw.js
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # trans-loader
2 |
3 | You don't need **npm** and **bundler**.
4 |
5 | You need just a `service-worker` script.
6 |
7 | ## What this script does...
8 |
9 | - Transform `.js` with babel on service-worker
10 | - Transform `.ts` and `.tsx` with typescript on service-worker
11 | - Load modules from [jspm.io](https://jspm.io) and cache them on serviceWorker.
12 |
13 | ## CAUTION!
14 |
15 | - **development only**. Do not use for production.
16 | - It works only for modern browser(ES2015+ and ES Modules ready).
17 |
18 | ## How to use
19 |
20 | Put [dist/sw.js](/dist/sw.js) as `/sw.js` on your app root.
21 |
22 | ```sh
23 | wget https://raw.githubusercontent.com/mizchi/trans-loader/master/dist/sw.js
24 | ```
25 |
26 | Rewrite your entry js like below.
27 |
28 | Before
29 |
30 | ```html
31 |
32 | ```
33 |
34 | After
35 |
36 | ```html
37 |
49 | ```
50 |
51 | See [working demo](/demo)
52 |
53 | ## Example 1: Compiled with babel
54 |
55 | ```js
56 | // /your-entry.js
57 | import React from "react";
58 | import ReactDOM from "react-dom";
59 | ReactDOM.render(Hello
, document.querySelector(".root"));
60 | ```
61 |
62 | ## Example 2: Load relative file
63 |
64 | ```
65 | index.html
66 | sw.js
67 | src/main.js
68 | src/components/App.js
69 | ```
70 |
71 | ```js
72 | // main.js
73 | import React from "react";
74 | import ReactDOM from "react-dom";
75 | import App from "./components/App";
76 | ReactDOM.render(, document.querySelector(".root"));
77 | ```
78 |
79 | ## Example 3: Load typescript
80 |
81 | ```
82 | index.html
83 | sw.js
84 | src/main.js
85 | src/components/App.tsx
86 | ```
87 |
88 | ```js
89 | // main.js
90 | import React from "react";
91 | import ReactDOM from "react-dom";
92 | import App from "./components/App";
93 | ReactDOM.render(, document.querySelector(".root"));
94 | ```
95 |
96 | ## Example 4: Loading with `package.json`'s version
97 |
98 | ```
99 | index.html
100 | sw.js
101 | package.json
102 | src/main.js
103 | ```
104 |
105 | `package.json`
106 |
107 | ```
108 | {
109 | "dependencies": {
110 | "react": "16.4.1",
111 | "react-dom": "16.4.1"
112 | }
113 | }
114 | ```
115 |
116 | Log
117 |
118 | ```
119 | trans-loader: Cache https://dev.jspm.io/react@16.4.1
120 | trans-loader: Cache https://dev.jspm.io/react-dom@16.4.1
121 | ```
122 |
123 | ## How it works
124 |
125 | ### Rewrite js content with service-worker proxy
126 |
127 | Compile content with babel/typescript by extname
128 |
129 | ```js
130 | // ...
131 | self.addEventListener("fetch", (event: any) => {
132 | if (event.request.url.indexOf("dev.jspm.io") > -1) {
133 | // cache jspm result
134 | event.respondWith(useCacheOrLoad(event.request));
135 | } else if (event.request.url.indexOf("/src/") > -1) {
136 | // transform
137 | console.log("trans-loader: with-transform", event.request.url);
138 | event.respondWith(respondWithTransform(event.request.url));
139 | }
140 | });
141 | ```
142 |
143 |
144 | ### Rewrite to dev.jspm.io
145 |
146 | Rewrite npm module path to `dev.jspm.io`. See [this code](/src/rewriteModulePath.js)
147 |
148 | ```js
149 | // before
150 | import React from "react";
151 | // after
152 | import React from "https://dev.jspm.io/react";
153 | ```
154 |
155 | ### Add valid extname
156 |
157 | - Try to access `.js, .mjs, .ts, .tsx, /index.js, /index.ts, /index.tsx`
158 | - return file with non-error endpoint
159 |
160 | ## LICENSE
161 |
162 | MIT
163 |
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # trans-loader demo
2 |
3 | Mount this dir to static server and open by your browser.
4 |
5 | ```
6 | $ yarn demo # on parent directory to build sw.js
7 | $ cd demo # here
8 | $ npm i -g http-server
9 | $ http-server -c-1
10 | ```
11 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | trans-loader demo
6 |
7 |
8 |
9 |
10 |
11 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "react": "16.4.1",
4 | "react-dom": "16.4.1",
5 | "styled-components": "^3.4.5"
6 | },
7 | "devDependencies": {
8 | "@types/react": "^16.4.13",
9 | "@types/react-redux": "^6.0.6",
10 | "@types/redux": "^3.6.0"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/demo/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Sub from "./Sub";
3 | import ReduxExample from "./ReduxExample";
4 |
5 | export default () => (
6 |
7 |
8 |
App
9 |
10 |
11 |
12 |
28 |
29 |
value: {props.value}
30 |
37 |
38 |