cleanup: wip part 3
twig + vite integration done needs https://github.com/rcrowe/TwigBridge/pull/435 hmr: to be tested
This commit is contained in:
Zephyr Lykos
parent
ae71d36c7f
commit
af2c13a8b4
2449
composer.lock
generated
2449
composer.lock
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -123,6 +123,7 @@ return [
|
|||
|
||||
// 'TwigBridge\Extension\Laravel\Form',
|
||||
// 'TwigBridge\Extension\Laravel\Html',
|
||||
'TwigBridge\Extension\Laravel\Vite',
|
||||
// 'TwigBridge\Extension\Laravel\Legacy\Facades',
|
||||
],
|
||||
|
||||
|
|
@ -153,7 +154,8 @@ return [
|
|||
| in order to be marked as safe.
|
||||
|
|
||||
*/
|
||||
'facades' => [],
|
||||
'facades' => [
|
||||
],
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
21
package.json
21
package.json
|
|
@ -11,15 +11,11 @@
|
|||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack serve",
|
||||
"build": "webpack --env production --progress",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"fmt": "prettier --write resources/assets tools webpack.config.ts",
|
||||
"fmt:check": "prettier --check resources/assets tools webpack.config.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"
|
||||
"test": "vitest",
|
||||
"build:urls": "ts-node tools/generateUrls.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.0.0",
|
||||
|
|
@ -74,8 +70,8 @@
|
|||
"eslint-config-xo-react": "^0.27.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^9.0.11",
|
||||
"js-yaml": "^4.1.0",
|
||||
"laravel-vite-plugin": "^1.0.1",
|
||||
"postcss": "^8.4.35",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.1.4",
|
||||
|
|
@ -92,13 +88,6 @@
|
|||
"iOS >= 12.5",
|
||||
"Chrome >= 87"
|
||||
],
|
||||
"prettier": {
|
||||
"printWidth": 80,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"tabWidth": 2
|
||||
},
|
||||
"eslintConfig": {
|
||||
"env": {
|
||||
"es2024": true
|
||||
|
|
|
|||
1
public/.gitignore
vendored
1
public/.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
app/
|
||||
build/
|
||||
|
|
|
|||
6
resources/assets/src/app.css
Normal file
6
resources/assets/src/app.css
Normal 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';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../fonts/minecraft.css';
|
||||
@import './avatar.css';
|
||||
@import '@/fonts/minecraft.css';
|
||||
@import '@/styles/avatar.css';
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@import 'spectre.css/dist/spectre.css';
|
||||
@import '@/fonts/minecraft.css';
|
||||
|
||||
body {
|
||||
height: 97vh;
|
||||
}
|
||||
|
|
@ -117,4 +117,4 @@ function createLineChart(
|
|||
});
|
||||
}
|
||||
|
||||
main();
|
||||
void main();
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<title>{% block title %}{% endblock %} - {{ site_name }}</title>
|
||||
{{ include('assets.spectre', ignore_missing = true) }}
|
||||
{{ vite('resources/assets/src/spectre.css')|raw }}
|
||||
{% for style in styles %}
|
||||
<link rel="stylesheet" href="{{ style }}">
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{% endif %}
|
||||
}
|
||||
</style>
|
||||
{{ include('assets.home-css', ignore_missing = true) }}
|
||||
{{ vite('resources/assets/home.css')|raw }}
|
||||
</head>
|
||||
|
||||
<body class="hold-transition layout-top-nav">
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
<script type="application/json" id="blessing-extra">
|
||||
{{ {transparent_navbar: transparent_navbar}|json_encode|raw }}
|
||||
</script>
|
||||
{{ include('assets.home', ignore_missing = true) }}
|
||||
{{ vite('resources/assets/src/scripts/homePage.ts')|raw }}
|
||||
{{ include('shared.foot') }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<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 %}
|
||||
<link rel="stylesheet" href="{{ style }}">
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script src="{{ i18n }}" crossorigin="anonymous"></script>
|
||||
{{ include('assets.app', ignore_missing = true) }}
|
||||
{{ vite('resources/index.tsx')|raw }}
|
||||
{% for script in scripts %}
|
||||
<script{% for attribute, value in script %} {{ attribute }}="{{ value }}"{% endfor %}></script>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="preconnect" href="{{ custom_cdn_host }}" id="cdn-host" crossorigin>
|
||||
{% endif %}
|
||||
<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 %}
|
||||
<link{% for attribute, value in link %} {{ attribute }}="{{ value|raw }}"{% endfor %}>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {defineConfig, splitVendorChunkPlugin} from 'vite';
|
||||
import laravel from 'laravel-vite-plugin';
|
||||
import react from '@vitejs/plugin-react-swc';
|
||||
import wasm from 'vite-plugin-wasm';
|
||||
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({
|
||||
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(),
|
||||
wasm(),
|
||||
topLevelAwait(),
|
||||
|
|
@ -21,21 +29,14 @@ export default defineConfig({
|
|||
},
|
||||
},
|
||||
publicDir: false,
|
||||
root: '',
|
||||
build: {
|
||||
target: browserslistToEsbuild(),
|
||||
sourcemap: true,
|
||||
copyPublicDir: false,
|
||||
outDir: new URL('public/app', import.meta.url).pathname,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
app: '@/index.tsx',
|
||||
style: '@/styles/common.css',
|
||||
},
|
||||
treeshake: {
|
||||
preset: 'recommended',
|
||||
},
|
||||
},
|
||||
},
|
||||
base: '/app/',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
21
yarn.lock
|
|
@ -3418,11 +3418,6 @@ human-signals@^5.0.0:
|
|||
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
|
||||
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:
|
||||
version "1.0.4"
|
||||
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"
|
||||
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:
|
||||
version "0.4.1"
|
||||
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"
|
||||
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:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.1.tgz#607dfe084157550fa33df18062b99ceea774cd9c"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user