Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup: wip part 3

Browse Source 
twig + vite integration done
needs https://github.com/rcrowe/TwigBridge/pull/435
hmr: to be tested
This commit is contained in:
Zephyr Lykos 2024-02-24 00:53:19 +08:00
parent ae71d36c7f
commit af2c13a8b4
No known key found for this signature in database
GPG Key ID: D3E9D31E2F77F04D
16 changed files with 1734 additions and 965 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2449
composer.lock generated
View File

File diff suppressed because it is too large Load Diff

4
config/twigbridge.php
View File

@ -123,6 +123,7 @@ return [
// 'TwigBridge\Extension\Laravel\Form', // 'TwigBridge\Extension\Laravel\Form',
// 'TwigBridge\Extension\Laravel\Html', // 'TwigBridge\Extension\Laravel\Html',
'TwigBridge\Extension\Laravel\Vite',
// 'TwigBridge\Extension\Laravel\Legacy\Facades', // 'TwigBridge\Extension\Laravel\Legacy\Facades',
], ],
@ -153,7 +154,8 @@ return [
| in order to be marked as safe. | in order to be marked as safe.
| |
*/ */
'facades' => [], 'facades' => [
],
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------

21
package.json
View File

@ -11,15 +11,11 @@
"type": "module", "type": "module",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack serve", "dev": "vite",
"build": "webpack --env production --progress", "build": "vite build",
"lint": "eslint .", "lint": "eslint .",
"fmt": "prettier --write resources/assets tools webpack.config.ts", "test": "vitest",
"fmt:check": "prettier --check resources/assets tools webpack.config.ts", "build:urls": "ts-node tools/generateUrls.ts"
"type:check": "tsc -p . --noEmit && tsc -p ./resources/assets/tests --noEmit",
"test": "node --experimental-vm-modules node_modules/.bin/jest",
"build:urls": "ts-node tools/generateUrls.ts",
"prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.0.0", "@emotion/react": "^11.0.0",
@ -74,8 +70,8 @@
"eslint-config-xo-react": "^0.27.0", "eslint-config-xo-react": "^0.27.0",
"eslint-plugin-react": "^7.33.2", "eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"husky": "^9.0.11",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"laravel-vite-plugin": "^1.0.1",
"postcss": "^8.4.35", "postcss": "^8.4.35",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite": "^5.1.4", "vite": "^5.1.4",
@ -92,13 +88,6 @@
"iOS >= 12.5", "iOS >= 12.5",
"Chrome >= 87" "Chrome >= 87"
], ],
"prettier": {
"printWidth": 80,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2
},
"eslintConfig": { "eslintConfig": {
"env": { "env": {
"es2024": true "es2024": true

1
public/.gitignore vendored
View File

@ -1 +1,2 @@
app/ app/
build/

6
resources/assets/src/app.css Normal file
View File

@ -0,0 +1,6 @@
@import '@/styles/common.css';
@import 'admin-lte/dist/css/alt/adminlte.components.css';
@import 'admin-lte/dist/css/alt/adminlte.core.css';
@import 'admin-lte/dist/css/alt/adminlte.pages.css';
@import 'admin-lte/dist/css/alt/adminlte.light.css';
@import '@fortawesome/fontawesome-free/css/all.css';

4
resources/assets/src/styles/home.css → resources/assets/src/home.css
View File

@ -1,5 +1,5 @@
@import '../fonts/minecraft.css'; @import '@/fonts/minecraft.css';
@import './avatar.css'; @import '@/styles/avatar.css';
body { body {
font-size: 16px; font-size: 16px;

3
resources/assets/src/styles/spectre.css → resources/assets/src/spectre.css
View File

@ -1,3 +1,6 @@
@import 'spectre.css/dist/spectre.css';
@import '@/fonts/minecraft.css';
body { body {
height: 97vh; height: 97vh;
} }

2
resources/assets/src/views/admin/Dashboard.ts
View File

@ -117,4 +117,4 @@ function createLineChart(
}); });
} }
main(); void main();

2
resources/views/errors/base.twig
View File

@ -6,7 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<title>{% block title %}{% endblock %} - {{ site_name }}</title> <title>{% block title %}{% endblock %} - {{ site_name }}</title>
{{ include('assets.spectre', ignore_missing = true) }} {{ vite('resources/assets/src/spectre.css')|raw }}
{% for style in styles %} {% for style in styles %}
<link rel="stylesheet" href="{{ style }}"> <link rel="stylesheet" href="{{ style }}">
{% endfor %} {% endfor %}

4
resources/views/home.twig
View File

@ -13,7 +13,7 @@
{% endif %} {% endif %}
} }
</style> </style>
{{ include('assets.home-css', ignore_missing = true) }} {{ vite('resources/assets/home.css')|raw }}
</head> </head>
<body class="hold-transition layout-top-nav"> <body class="hold-transition layout-top-nav">
@ -129,7 +129,7 @@
<script type="application/json" id="blessing-extra"> <script type="application/json" id="blessing-extra">
{{ {transparent_navbar: transparent_navbar}|json_encode|raw }} {{ {transparent_navbar: transparent_navbar}|json_encode|raw }}
</script> </script>
{{ include('assets.home', ignore_missing = true) }} {{ vite('resources/assets/src/scripts/homePage.ts')|raw }}
{{ include('shared.foot') }} {{ include('shared.foot') }}
</body> </body>
</html> </html>

2
resources/views/setup/base.twig
View File

@ -6,7 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<title>{% block title %}{{ trans('setup.wizard.master.title') }}{% endblock %}</title> <title>{% block title %}{{ trans('setup.wizard.master.title') }}{% endblock %}</title>
{{ include('assets.spectre', ignore_missing = true) }} {{ vite('resources/assets/src/spectre.css')|raw }}
{% for style in styles %} {% for style in styles %}
<link rel="stylesheet" href="{{ style }}"> <link rel="stylesheet" href="{{ style }}">
{% endfor %} {% endfor %}

2
resources/views/shared/foot.twig
View File

@ -1,5 +1,5 @@
<script src="{{ i18n }}" crossorigin="anonymous"></script> <script src="{{ i18n }}" crossorigin="anonymous"></script>
{{ include('assets.app', ignore_missing = true) }} {{ vite('resources/index.tsx')|raw }}
{% for script in scripts %} {% for script in scripts %}
<script{% for attribute, value in script %} {{ attribute }}="{{ value }}"{% endfor %}></script> <script{% for attribute, value in script %} {{ attribute }}="{{ value }}"{% endfor %}></script>
{% endfor %} {% endfor %}

2
resources/views/shared/head.twig
View File

@ -10,7 +10,7 @@
<link rel="preconnect" href="{{ custom_cdn_host }}" id="cdn-host" crossorigin> <link rel="preconnect" href="{{ custom_cdn_host }}" id="cdn-host" crossorigin>
{% endif %} {% endif %}
<script>window.blessing = {{ blessing|json_encode|raw }}</script> <script>window.blessing = {{ blessing|json_encode|raw }}</script>
{{ include('assets.style', ignore_missing = true) }} {{ vite('resources/assets/src/app.css')|raw }}
{% for link in links %} {% for link in links %}
<link{% for attribute, value in link %} {{ attribute }}="{{ value|raw }}"{% endfor %}> <link{% for attribute, value in link %} {{ attribute }}="{{ value|raw }}"{% endfor %}>
{% endfor %} {% endfor %}

15
vite.config.ts
View File

@ -1,4 +1,5 @@
import {defineConfig, splitVendorChunkPlugin} from 'vite'; import {defineConfig, splitVendorChunkPlugin} from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react-swc'; import react from '@vitejs/plugin-react-swc';
import wasm from 'vite-plugin-wasm'; import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await'; import topLevelAwait from 'vite-plugin-top-level-await';
@ -8,6 +9,13 @@ const root = new URL('resources/assets/src/', import.meta.url);
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
laravel([
new URL('index.tsx', root).pathname,
new URL('scripts/homePage.ts', root).pathname,
new URL('app.css', root).pathname,
new URL('spectre.css', root).pathname,
new URL('home.css', root).pathname,
]),
react(), react(),
wasm(), wasm(),
topLevelAwait(), topLevelAwait(),
@ -21,21 +29,14 @@ export default defineConfig({
}, },
}, },
publicDir: false, publicDir: false,
root: '',
build: { build: {
target: browserslistToEsbuild(), target: browserslistToEsbuild(),
sourcemap: true, sourcemap: true,
copyPublicDir: false, copyPublicDir: false,
outDir: new URL('public/app', import.meta.url).pathname,
rollupOptions: { rollupOptions: {
input: {
app: '@/index.tsx',
style: '@/styles/common.css',
},
treeshake: { treeshake: {
preset: 'recommended', preset: 'recommended',
}, },
}, },
}, },
base: '/app/',
}); });

161
webpack.config.ts
View File

@ -1,161 +0,0 @@
import * as path from 'node:path';
import {execSync} from 'node:child_process';
import * as webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import HtmlWebpackEnhancementPlugin from './tools/HtmlWebpackEnhancementPlugin';
type Env = {
production?: boolean;
};
export default function (env?: Env): webpack.Configuration {
const isDevelopment = !env?.production;
const isGitpod = 'GITPOD_REPO_ROOT' in process.env;
const htmlPublicPath = isDevelopment
? (isGitpod
? `${execSync('gp url 8080')}/app/`
: '//localhost:8080/app/')
: '{{ cdn_base }}/app/';
return {
name: 'app',
mode: isDevelopment ? 'development' : 'production',
entry: {
app: ['react-hot-loader/patch', '@/index.tsx'],
style: [
'@/styles/common.css',
'admin-lte/dist/css/alt/adminlte.components.min.css',
'admin-lte/dist/css/alt/adminlte.core.min.css',
'admin-lte/dist/css/alt/adminlte.pages.min.css',
'admin-lte/dist/css/alt/adminlte.light.min.css',
'@fortawesome/fontawesome-free/css/all.min.css',
],
home: '@/scripts/homePage.ts',
'home-css': '@/styles/home.css',
spectre: [
'spectre.css/dist/spectre.min.css',
'@/fonts/minecraft.css',
'@/styles/spectre.css',
],
},
output: {
path: `${__dirname}/public/app`,
publicPath: '/app/',
filename: isDevelopment ? '[name].js' : '[name].[contenthash:7].js',
chunkFilename: isDevelopment ? '[id].js' : '[id].[contenthash:7].js',
crossOriginLoading: 'anonymous',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFile: isDevelopment ? 'tsconfig.dev.json' : 'tsconfig.build.json',
transpileOnly: true,
},
},
{
test: /\.css$/,
use: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'postcss-loader',
],
},
{
test: /\.(png|webp|svg|woff2?|eot|ttf)$/,
type: 'asset',
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[contenthash:7].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:7].css',
}),
new HtmlWebpackPlugin({
templateContent: '',
chunks: ['app'],
scriptLoading: 'blocking',
filename: 'app.twig',
publicPath: htmlPublicPath,
}),
new HtmlWebpackPlugin({
templateContent: '',
chunks: ['style'],
filename: 'style.twig',
publicPath: htmlPublicPath,
}),
new HtmlWebpackPlugin({
templateContent: '',
chunks: ['home'],
scriptLoading: 'blocking',
filename: 'home.twig',
publicPath: htmlPublicPath,
}),
new HtmlWebpackPlugin({
templateContent: '',
chunks: ['home-css'],
filename: 'home-css.twig',
publicPath: htmlPublicPath,
}),
new HtmlWebpackPlugin({
templateContent: '',
chunks: ['spectre'],
filename: 'spectre.twig',
publicPath: htmlPublicPath,
}),
new HtmlWebpackEnhancementPlugin(),
new webpack.DefinePlugin({
'window.Deno': 'true',
Deno: {
args: [],
build: {},
version: {},
},
'process.platform': '"browser"',
__blessing_public_path__: JSON.stringify(htmlPublicPath),
}),
].concat(isDevelopment ? [new webpack.HotModuleReplacementPlugin()] : []),
resolve: {
extensions: ['.js', '.ts', '.tsx'],
alias: {
'react-dom': '@hot-loader/react-dom',
'@': path.resolve(__dirname, 'resources/assets/src'),
readline: '@/scripts/cli/readline.ts',
prompts: 'prompts/lib/index.js',
assert: false,
},
},
optimization: {
// @ts-expect-error
minimizer: [new CssMinimizerPlugin({}), '...'],
},
experiments: {
syncWebAssembly: true,
},
devtool: isDevelopment ? 'eval-source-map' : 'source-map',
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
host: '0.0.0.0',
hot: true,
hotOnly: true,
stats: 'errors-warnings',
allowedHosts: ['localhost'].concat(
isDevelopment && isGitpod ? ['.gitpod.io'] : [],
),
},
stats: 'errors-warnings',
ignoreWarnings: [/size limit/i],
};
}

21
yarn.lock
View File

@ -3418,11 +3418,6 @@ human-signals@^5.0.0:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28" resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ== integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
husky@^9.0.11:
version "9.0.11"
resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
hyphenate-style-name@^1.0.3: hyphenate-style-name@^1.0.3:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
@ -3998,6 +3993,14 @@ kleur@^3.0.3, kleur@^4.1.3:
resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
laravel-vite-plugin@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/laravel-vite-plugin/-/laravel-vite-plugin-1.0.1.tgz#b92d0c939ccd60879746b23282100131f753cec7"
integrity sha512-laLEZUnSskIDZtLb2FNRdcjsRUhh1VOVvapbVGVTeaBPJTCF/b6gbPiX2dZdcH1RKoOE0an7L+2gnInk6K33Zw==
dependencies:
picocolors "^1.0.0"
vite-plugin-full-reload "^1.1.0"
levn@^0.4.1: levn@^0.4.1:
version "0.4.1" version "0.4.1"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@ -5916,6 +5919,14 @@ vite-node@1.3.1:
picocolors "^1.0.0" picocolors "^1.0.0"
vite "^5.0.0" vite "^5.0.0"
vite-plugin-full-reload@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/vite-plugin-full-reload/-/vite-plugin-full-reload-1.1.0.tgz#ca6fa32631024a459ea9e5613dd4c0ff0f3b7995"
integrity sha512-3cObNDzX6DdfhD9E7kf6w2mNunFpD7drxyNgHLw+XwIYAgb+Xt16SEXo0Up4VH+TMf3n+DSVJZtW2POBGcBYAA==
dependencies:
picocolors "^1.0.0"
picomatch "^2.3.1"
vite-plugin-top-level-await@^1.4.1: vite-plugin-top-level-await@^1.4.1:
version "1.4.1" version "1.4.1"
resolved "https://registry.yarnpkg.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.1.tgz#607dfe084157550fa33df18062b99ceea774cd9c" resolved "https://registry.yarnpkg.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.1.tgz#607dfe084157550fa33df18062b99ceea774cd9c"