Adopt ESBuild for build

Sadly, it's time to incorporate a build step: 1. JSX is a much nicer development experience than raw JavaScript for constructing Preact elements. HTM comes close, but the inability to incorporate type-checking in a non-starter. 2. The pre-bundling step with Rollup to generate web_modules (previously implemented using Snowpack) is much complexity. 3. ESBuild is very fast 4. Opens up the option of using native TypeScript 5. Chrome adds native support for import-maps in v89 (woo!), but Firefox support is not yet on the horizon 6. Probably faster loading experience to prebundle distributable
aduth · Mar 7, 2021 · 87eebea · 87eebea
1 parent 3d8ef1a
commit 87eebea
Show file tree

Hide file tree

Showing 48 changed files with 187 additions and 514 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1 @@
-web_modules
+build
diff --git a/.gitignore b/.gitignore
@@ -3,9 +3,9 @@
 
 # Dependencies
 node_modules
-web_modules
 
 # Generated
+build
 stream-lens.zip
 
 # Logs

diff --git a/background.html b/background.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>StreamLens</title>
-<script src="/web_modules/webextension-polyfill.js"></script>
-<script type="module" src="./background/index.js"></script>
+<script src="/node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
+<script type="module" src="./build/background/index.js"></script>
diff --git a/background/badge.js b/background/badge.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { some, isEmpty, size } from '/web_modules/lodash-es.js';
+import { some, isEmpty, size } from 'lodash-es';
 
 /** @typedef {import('./store').SLStore} SLStore */
 

diff --git a/background/index.js b/background/index.js
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import createStore from '/web_modules/unistore.js';
-import { primary } from '/web_modules/unistore-browser-sync.js';
+import createStore from 'unistore';
+import { primary } from 'unistore-browser-sync';
 
 /**
  * Internal dependencies

diff --git a/background/oauth.js b/background/oauth.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { snakeCase } from '/web_modules/lodash-es.js';
+import { snakeCase } from 'lodash-es';
 
 /**
  * Project dependencies
  */
-import { authRedirectURL } from '/config.js';
+import { authRedirectURL } from '../config.js';
 
 /**
  * Suported authorization request parameters, values serving as defaults.

diff --git a/background/providers/twitch.js b/background/providers/twitch.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { find, chunk } from '/web_modules/lodash-es.js';
+import { find, chunk } from 'lodash-es';
 
 /**
  * Project dependencies
  */
-import { applications } from '/config.js';
+import { applications } from '../../config.js';
 
 /**
  * Internal dependencies

diff --git a/background/store/actions.js b/background/store/actions.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { omit, reject } from '/web_modules/lodash-es.js';
+import { omit, reject } from 'lodash-es';
 
 /**
  * Project dependencies
  */
-import { applications } from '/config.js';
+import { applications } from '../../config.js';
 
 /**
  * Internal dependencies

diff --git a/manifest.json b/manifest.json
@@ -21,7 +21,7 @@
 	"content_scripts": [
 		{
 			"matches": [ "https://streamlens.app/auth/" ],
-			"js": [ "web_modules/webextension-polyfill.js", "auth.js" ],
+			"js": [ "node_modules/webextension-polyfill/dist/browser-polyfill.js", "auth.js" ],
 			"all_frames": true
 		}
 	],

diff --git a/options.html b/options.html
@@ -6,5 +6,5 @@
 <link rel="stylesheet" href="common.css">
 <link rel="stylesheet" href="options.css">
 <div id="app"></div>
-<script src="/web_modules/webextension-polyfill.js"></script>
-<script type="module" src="options/index.js"></script>
+<script src="/node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
+<script type="module" src="build/options/index.js"></script>
diff --git a/options/components/color-scheme-setting.js b/options/components/color-scheme-setting.js
@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { h } from '/web_modules/preact.js';
+import { h } from 'preact';
 
 /**
  * Project dependencies
  */
-import useSelect from '/common/hooks/use-select.js';
-import useDispatch from '/common/hooks/use-dispatch.js';
+import { useSelect, useDispatch } from '@streamlens/hooks';
 
 /**
  * Internal dependencies

diff --git a/options/components/provider-authorization.js b/options/components/provider-authorization.js
@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { h, Fragment } from '/web_modules/preact.js';
+import { h, Fragment } from 'preact';
 
 /**
  * Project dependencies
  */
-import ProviderLabel from '/common/components/provider-label.js';
-import useSelect from '/common/hooks/use-select.js';
-import useDispatch from '/common/hooks/use-dispatch.js';
+import { ProviderLabel } from '@streamlens/components';
+import { useSelect, useDispatch } from '@streamlens/hooks';
 
 /**
  * Internal dependencies

diff --git a/options/components/provider-authorizations.js b/options/components/provider-authorizations.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { h } from '/web_modules/preact.js';
+import { h } from 'preact';
 
 /**
  * Project dependencies
  */
-import useSelect from '/common/hooks/use-select.js';
+import { useSelect } from '@streamlens/hooks';
 
 /**
  * Internal dependencies

diff --git a/options/components/provider-token-error.js b/options/components/provider-token-error.js
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { h } from '/web_modules/preact.js';
+import { h } from 'preact';
 
 /**
  * Project dependencies
  */
-import useDispatch from '/common/hooks/use-dispatch.js';
-import Notice from '/common/components/notice.js';
-import { getProviderLabel } from '/common/components/provider-label.js';
+import { useDispatch } from '@streamlens/hooks';
+import { Notice } from '@streamlens/components';
+import { getProviderLabel } from '@streamlens/components/provider-label';
 
 /**
  * Returns a Token Errors element.

diff --git a/options/components/root.js b/options/components/root.js
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { h } from '/web_modules/preact.js';
-import { StoreContext } from '/web_modules/prsh.js';
+import { h } from 'preact';
+import { StoreContext } from 'prsh';
 
 /**
  * Internal dependencies

diff --git a/options/components/section.js b/options/components/section.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { h } from '/web_modules/preact.js';
+import { h } from 'preact';
 
 /** @typedef {import('preact').ComponentChildren} ComponentChildren */
 

diff --git a/options/index.js b/options/index.js
@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import { render, h } from '/web_modules/preact.js';
-import createStore from '/web_modules/unistore.js';
-import { replica } from '/web_modules/unistore-browser-sync.js';
+import { render, h } from 'preact';
+import createStore from 'unistore';
+import { replica } from 'unistore-browser-sync';
 
 /**
  * Internal dependencies