JosunLP/BrowserExtensionTemplate
1
0
Fork 0
mirror of https://github.com/JosunLP/BrowserExtensionTemplate.git synced 2025-06-21 10:01:08 +00:00
Code Issues Projects Releases Wiki Activity Actions

working on vite style integration

Browse source
This commit is contained in:
Jonas Pfalzgraf 2024-06-01 02:08:14 +02:00
parent 693a8da648
commit b225218e94
17 changed files with 101 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -688,7 +688,7 @@ FodyWeavers.xsd
dist
tools/syncConfig.js
tools/deploy.js
tools/parse.js
tools/v2.js
tools/clean.js
package-lock.json

2
LICENSE
View file

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2022 Jonas Pfalzgraf
Copyright (c) 2024 Jonas Pfalzgraf
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

5
package.json
View file

@ -4,10 +4,9 @@
"private": true,
"type": "module",
"scripts": {
"deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
"deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js",
"deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
"build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js",
"build-css": "sass ./src/sass/:./dist/css/",
"build": "vite build",
"build-tooling": "tsc --project ./tooling.tsconfig.json",
"watch-ts": "tsc -w -p tsconfig.json",
"watch-sass": "sass --watch ./src/sass/:./dist/css/",

11
public/manifest.json
View file

@ -21,15 +21,6 @@
"notifications"
],
"background": {
"service_worker": "js/background.js"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens popup.html"
}
"service_worker": "background.js"
}
}

3
public/options.html
View file

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico">
<title>{{BET}} Options</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<noscript>
@ -20,7 +19,7 @@
</div>
</div>
<footer>
<script type="module" src="./js/settings.js"></script>
<script type="module" src="./settings.js"></script>
</footer>
</body>
</html>

3
public/popup.html
View file

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico">
<title>{{BET}}</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<noscript>
@ -20,7 +19,7 @@
</div>
</div>
<footer>
<script type="module" src="./js/app.js"></script>
<script type="module" src="./app.js"></script>
</footer>
</body>
</html>

1
src/app.ts
View file

@ -1,4 +1,5 @@
import { Session } from "./classes/session"
import "./sass/app.sass"
class App {

11
src/background.ts
View file

@ -1,12 +1,9 @@
class Background {
constructor() {
this.main();
}
constructor() {
this.main();
}
async main(): Promise<void> {
}
async main(): Promise<void> {}
}
new Background();

1
src/settings.ts
View file

@ -1,5 +1,6 @@
import { Session } from "./classes/session";
import { BasicButton } from "./components/button";
import "./sass/app.sass";
class Settings {

3
tooling.tsconfig.json
View file

@ -1,6 +1,9 @@
{
"compilerOptions": {
"target": "ESNext",
"lib": [
"ESNext"
],
"module": "ESNext",
"outDir": "./tools/",
"rootDir": "./tools/",

9
tools/clean.ts
View file

@ -1,9 +0,0 @@
import * as fs from "fs";
function removeExport(file: string) {
let content = fs.readFileSync(file, "utf8");
content = content.replace("export {};", "");
fs.writeFileSync(file, content);
}
removeExport("./dist/js/background.js");

84
tools/deploy.ts
View file

@ -1,84 +0,0 @@
import * as fs from 'fs';
import * as path from 'path';
const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
const DEPLOY_ENTRY = "./public/";
const DEPLOY_TARGET = "./dist/";
function deleteFolderRecursive(path: string) {
if (fs.existsSync(path)) {
fs.readdirSync(path).forEach(function (file: string) {
const curPath = path + "/" + file;
if (fs.lstatSync(curPath).isDirectory()) {
deleteFolderRecursive(curPath);
} else {
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}
function findHtmlFilesRecursive(source: string): string[] {
let files: string[] = [];
const dir = fs.readdirSync(source);
dir.forEach(function (file: string) {
const sourceFile = path.join(source, file);
const stat = fs.lstatSync(sourceFile);
if (stat.isDirectory()) {
files = files.concat(findHtmlFilesRecursive(sourceFile));
} else {
if (path.extname(sourceFile) == '.html') {
files.push(sourceFile);
}
}
});
return files;
}
function replaceKeywordsInHtmlFile(file: string) {
let content = fs.readFileSync(file, 'utf8');
const pairs = appConfig.htmlTemplatePairs;
pairs.forEach(function (pair: object) {
// @ts-ignore
content = content.replaceAll(pair.key, pair.value);
});
file = file.replace("public\\", DEPLOY_TARGET);
fs.writeFileSync(file, content);
}
function buildHtmlFiles(source: string) {
const files = findHtmlFilesRecursive(source);
files.forEach(function (file: string) {
replaceKeywordsInHtmlFile(file);
});
}
function mkdirSync(path: string) {
try {
fs.mkdirSync(path);
} catch (e: any) {
if (e.code != 'EEXIST') throw e;
}
}
function copyFiles(source: string, target: string) {
const files = fs.readdirSync(source);
files.forEach(function (file: string) {
const sourceFile = path.join(source, file);
const targetFile = path.join(target, file);
const stat = fs.lstatSync(sourceFile);
if (stat.isDirectory()) {
mkdirSync(targetFile);
copyFiles(sourceFile, targetFile);
} else {
fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
}
});
}
deleteFolderRecursive(DEPLOY_TARGET);
mkdirSync(DEPLOY_TARGET);
copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET);
buildHtmlFiles(DEPLOY_ENTRY);
console.log("Deployed to " + DEPLOY_TARGET);

43
tools/parse.ts Normal file
View file

@ -0,0 +1,43 @@
import * as fs from 'fs';
import * as path from 'path';
const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
const DEPLOY_TARGET = "./dist/";
function findHtmlFilesRecursive(source: string): string[] {
let files: string[] = [];
const dir = fs.readdirSync(source);
dir.forEach(function (file: string) {
const sourceFile = path.join(source, file);
const stat = fs.lstatSync(sourceFile);
if (stat.isDirectory()) {
files = files.concat(findHtmlFilesRecursive(sourceFile));
} else {
if (path.extname(sourceFile) == '.html') {
files.push(sourceFile);
}
}
});
return files;
}
function replaceKeywordsInHtmlFile(file: string) {
let content = fs.readFileSync(file, 'utf8');
const pairs: { key: string, value: string }[] = appConfig.htmlTemplatePairs;
pairs.forEach(function (pair: { key: string, value: string }) {
//@ts-ignore
content = content.replaceAll(pair.key, pair.value);
});
file = file.replace("public\\", DEPLOY_TARGET);
fs.writeFileSync(file, content);
}
function buildHtmlFiles(source: string) {
const files = findHtmlFilesRecursive(source);
files.forEach(function (file: string) {
replaceKeywordsInHtmlFile(file);
});
}
buildHtmlFiles(DEPLOY_TARGET);
console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));

2
tsconfig.json
View file

@ -6,7 +6,7 @@
// "incremental": true, /* Enable incremental compilation */
"target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
"module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
// "lib": ["ESNext"], /* Specify library files to be included in the compilation. */
"lib": ["ESNext"], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */

24
vite.config.background.js
View file

@ -1,24 +0,0 @@
import { defineConfig } from "vite";
import { resolve } from "path";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
build: {
rollupOptions: {
input: resolve(__dirname, "src/background.ts"),
output: {
entryFileNames: "background.js",
dir: resolve(__dirname, "dist/js"),
},
},
sourcemap: true,
},
plugins: [tsconfigPaths()],
resolve: {
extensions: [".tsx", ".ts"],
},
esbuild: {
include: /.*\.tsx?$/,
exclude: [/node_modules/, /dist/, /src\/app\.ts/, /src\/settings\.ts/],
},
});

66
vite.config.js
View file

@ -1,29 +1,43 @@
import { defineConfig } from "vite";
import { resolve } from "path";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from 'vite';
import { resolve } from 'path';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
build: {
rollupOptions: {
input: resolve(__dirname, "src/app.ts"),
output: {
entryFileNames: "app.js",
dir: resolve(__dirname, "dist/js"),
},
},
sourcemap: true,
},
plugins: [tsconfigPaths()],
resolve: {
extensions: [".tsx", ".ts"],
},
esbuild: {
include: /.*\.tsx?$/,
exclude: [
/node_modules/,
/dist/,
/src\/background\.ts/,
/src\/settings\.ts/,
],
},
build: {
rollupOptions: {
input: {
app: resolve(__dirname, 'src/app.ts'),
settings: resolve(__dirname, 'src/settings.ts'),
background: resolve(__dirname, 'src/background.ts'),
},
output: {
entryFileNames: '[name].js',
dir: resolve(__dirname, 'dist'),
},
},
sourcemap: true,
},
plugins: [
tsconfigPaths(),
],
resolve: {
extensions: ['.tsx', '.ts', '.scss', '.sass'],
},
css: {
preprocessorOptions: {
sass: {
additionalData: `@import "@/src/sass/app.sass"`, // optional
},
},
},
esbuild: {
include: /.*\.tsx?$/,
exclude: [
/node_modules/,
/dist/,
// /src\/background\.ts/,
// /src\/settings\.ts/,
// /src\/app\.ts/,
],
},
});

29
vite.config.settings.js
View file

@ -1,29 +0,0 @@
import { defineConfig } from "vite";
import { resolve } from "path";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
build: {
rollupOptions: {
input: resolve(__dirname, "src/settings.ts"),
output: {
entryFileNames: "settings.js",
dir: resolve(__dirname, "dist/js"),
},
},
sourcemap: true,
},
plugins: [tsconfigPaths()],
resolve: {
extensions: [".tsx", ".ts"],
},
esbuild: {
include: /.*\.tsx?$/,
exclude: [
/node_modules/,
/dist/,
/src\/background\.ts/,
/src\/app\.ts/,
],
},
});