Emoji favicons for the web
Update build process to use esbuild
+49
-64
+3
-12
Makefile
+3
-12
Makefile
···
2
2
# They are intentionally NOT used by this file
3
3
4
4
build:
5
-
deno run --unstable --allow-net --allow-read --allow-write bundler.ts
5
+
deno run --allow-env --allow-net --allow-read --allow-write --allow-run bundler.ts
6
6
7
7
chrome:
8
-
deno run --unstable --allow-net --allow-read --allow-write bundler.ts chrome
8
+
deno run --allow-env --allow-net --allow-read --allow-write --allow-run bundler.ts chrome
9
9
10
10
firefox:
11
-
deno run --unstable --allow-net --allow-read --allow-write bundler.ts firefox
12
-
13
-
watch:
14
-
deno run --watch=source --unstable --allow-net --allow-read --allow-write bundler.ts
15
-
16
-
watch-chrome:
17
-
deno run --watch=source --unstable --allow-net --allow-read --allow-write bundler.ts chrome
18
-
19
-
watch-firefox:
20
-
deno run --watch=source --unstable --allow-net --allow-read --allow-write bundler.ts firefox
11
+
deno run --allow-env --allow-net --allow-read --allow-write --allow-run bundler.ts firefox
21
12
22
13
test:
23
14
deno fmt
+28
-38
bundler.ts
+28
-38
bundler.ts
···
3
3
*
4
4
* Note: This file does NOT use deno.json as a config file for itself.
5
5
* That config file is specifically for use in Deno.emit.
6
+
*
7
+
* Probably move to esbuild:
8
+
* - https://deno.land/x/esbuild_deno_loader@0.5.0
6
9
*/
10
+
import * as esbuild from 'https://deno.land/x/esbuild@v0.14.39/mod.js';
11
+
import { denoPlugin } from 'https://raw.githubusercontent.com/ivebencrazy/esbuild_deno_loader/main/mod.ts';
7
12
import { copySync, ensureDir } from 'fs';
13
+
import { resolve } from 'https://deno.land/std@0.142.0/path/mod.ts';
8
14
import importMap from './import_map.json' assert { type: 'json' };
15
+
16
+
const importMapURL = new URL('file://' + resolve('./import_map.json'));
9
17
10
18
interface BrowserManifestSettings {
11
19
color: string;
···
69
77
70
78
console.log(`Initializing ${colorizedBrowserName} build...`);
71
79
72
-
await Promise.all([
73
-
loadFile(browserId, 'options.tsx'),
74
-
loadFile(browserId, 'content_script.ts'),
75
-
loadFile(browserId, 'background.ts'),
76
-
loadFile(browserId, 'popup.tsx'),
77
-
]);
80
+
await esbuild.build({
81
+
plugins: [denoPlugin({ importMapURL })],
82
+
entryPoints: [
83
+
'source/options.tsx',
84
+
'source/content_script.ts',
85
+
'source/background.ts',
86
+
'source/popup.tsx',
87
+
],
88
+
outdir: `dist/${browserId}/`,
89
+
bundle: true,
90
+
watch: {
91
+
onRebuild(error, result) {
92
+
if (error) {
93
+
console.error(`Rebuild for ${colorizedBrowserName} failed:`, error);
94
+
} else console.log(`Rebuilt for ${colorizedBrowserName}`);
95
+
},
96
+
},
97
+
format: 'esm',
98
+
logLevel: 'verbose',
99
+
});
78
100
79
101
console.log(`Build complete for ${colorizedBrowserName}`);
80
102
});
81
-
82
-
async function loadFile(browserId: string, name: string) {
83
-
const emitOptions: Deno.EmitOptions = {
84
-
bundle: 'classic',
85
-
compilerOptions: {
86
-
lib: ['dom', 'dom.iterable', 'esnext'],
87
-
jsx: 'react',
88
-
jsxFactory: 'h',
89
-
jsxFragmentFactory: 'Fragment',
90
-
},
91
-
importMap,
92
-
importMapPath: './import_map.json',
93
-
};
94
-
95
-
buildFiles(browserId, name, await Deno.emit(`source/${name}`, emitOptions));
96
-
}
97
-
98
-
function buildFiles(
99
-
browserId: string,
100
-
name: string,
101
-
emitResult: Deno.EmitResult,
102
-
) {
103
-
const { diagnostics, files } = emitResult;
104
-
const bundleCode: string = files['deno:///bundle.js'];
105
-
const outputFileName = name.replace(/(t|j)sx?$/, 'js');
106
-
const outputPath = `dist/${browserId}/${outputFileName}`;
107
-
108
-
console.info(`%c building ${name} > ${outputPath}...`, 'color: #bada55');
109
-
if (diagnostics.length) console.warn(Deno.formatDiagnostics(diagnostics));
110
-
111
-
Deno.writeTextFile(outputPath, bundleCode);
112
-
}
+1
-1
import_map.json
+1
-1
import_map.json
···
2
2
"imports": {
3
3
"asserts": "https://deno.land/std@0.138.0/testing/asserts.ts",
4
4
"bdd": "https://deno.land/std@0.138.0/testing/bdd.ts",
5
-
"emoji": "https://deno.land/x/emoji@0.1.2",
5
+
"emoji": "https://raw.githubusercontent.com/ivebencrazy/emoji/add-update-action/mod.ts",
6
6
"fs": "https://deno.land/std@0.138.0/fs/mod.ts",
7
7
"mock": "https://deno.land/std@0.138.0/testing/mock.ts",
8
8
"preact": "https://esm.sh/preact?dev",
+8
-4
source/background.ts
+8
-4
source/background.ts
···
14
14
const autoselector = new Autoselector();
15
15
let settings: Settings = defaultSettings;
16
16
17
-
18
-
await updateCache()
17
+
updateCache();
19
18
20
-
function selectFavicon(url: string | void, settings: Settings): [Favicon | void, boolean] {
19
+
function selectFavicon(
20
+
url: string | void,
21
+
settings: Settings,
22
+
): [Favicon | void, boolean] {
21
23
const { ignoreList = [], siteList = [], features = {} } = settings;
22
24
23
25
if (url) {
···
58
60
59
61
async function updateCache() {
60
62
try {
61
-
const storedSettings: Settings = await browserAPI.storage.sync.get(STORAGE_KEYS) as Settings;
63
+
const storedSettings: Settings = await browserAPI.storage.sync.get(
64
+
STORAGE_KEYS,
65
+
) as Settings;
62
66
if (storedSettings) settings = storedSettings;
63
67
} catch {}
64
68
}
+1
-1
source/config/legacy_autoselect_set.ts
+1
-1
source/config/legacy_autoselect_set.ts
···
33
33
'🐕', '🐩', '🐈', '🐓', '🦃', '🕊', '🐇', '🐁', '🐀', '🐿', '🐾', '🐉',
34
34
'🐲', '🌵', '🎄', '🌲', '🌳', '🌴', '🌱', '🌿', '☘️', '🍀', '🎍', '🎋',
35
35
'🍃', '🍂', '🍁', '🍄', '🌾', '💐', '🌷', '🌹', '🥀', '🌻', '🌼', '🌸',
36
-
'🌺', '🌎', '🌕', '🌚', '🌝', '🌞', '🌜', '🌙', '💫', '⭐️', '🌟', '✨',
36
+
'🌺', '🌎', '🌕', '🌚', '🌝', '🌞', '🌜', '🌙', '💫', '⭐', '🌟', '✨',
37
37
'⚡️', '🔥', '💥', '☄️', '☀️', '🌤', '⛅️', '🌥', '🌦', '🌈', '☁️', '⛄️',
38
38
'❄️', '🌬', '💨', '🌪', '🌫', '🌊', '💧', '💦', '☔', '🍏', '🍎', '🍐',
39
39
'🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🍍', '🥝', '🥑',
+1
-1
source/content_script.ts
+1
-1
source/content_script.ts
+1
-1
source/hooks/use_list_state.ts
+1
-1
source/hooks/use_list_state.ts
+3
-3
source/popup.tsx
+3
-3
source/popup.tsx
···
18
18
19
19
useEffect(() => {
20
20
async function setup() {
21
-
const [ activeTab ] = await browserAPI.tabs.query(queryOptions);
21
+
const [activeTab] = await browserAPI.tabs.query(queryOptions);
22
22
setCurrTab(activeTab);
23
23
}
24
24
browserAPI.storage.onChanged.addListener(setup);
···
51
51
browserAPI.runtime.openOptionsPage();
52
52
}, []);
53
53
54
-
if (loading) return <div>loading...</div>
54
+
if (loading) return <div>loading...</div>;
55
55
56
56
return (
57
57
<div className='popup-wrapper'>
58
58
<p>
59
59
Current Favicon:
60
60
<img
61
-
className="favicon-icon"
61
+
className='favicon-icon'
62
62
src={favIconUrl}
63
63
width={20}
64
64
height={20}
+3
-3
source/utilities/autoselector.ts
+3
-3
source/utilities/autoselector.ts
···
1
1
import type { Favicon } from '../types.ts';
2
2
3
-
import * as emoji from 'https://deno.land/x/emoji/mod.ts';
3
+
import * as emoji from 'emoji';
4
4
import LEGACY_EMOJI_SET from '../config/legacy_autoselect_set.ts';
5
5
6
6
const emojis = emoji.all();
7
-
7
+
console.log(emojis);
8
8
type EmojiMap = { [alias: string]: emoji.Emoji };
9
9
10
10
const NON_SPACING_MARK = String.fromCharCode(65039); // 65039 - '️' - 0xFE0F;
···
19
19
}),
20
20
);
21
21
22
-
const legacySet = LEGACY_EMOJI_SET.map((emoji) => byCode[emoji]);
22
+
const legacySet = LEGACY_EMOJI_SET.map((emoji: string) => byCode[emoji]);
23
23
24
24
/**
25
25
* For selecting random favicon from a set. Currently, only select from