PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-03-28 06:17:46 +01:00
Code Issues Projects Releases Packages Wiki Activity

finalize vite switch + cleanup package.json

Browse source
This commit is contained in:
Luna D. 2024-04-29 23:54:17 +02:00
parent a626545ed4
commit 7b4a047d90
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
15 changed files with 798 additions and 2811 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/.eslintignore
View file

@ -1,3 +1,3 @@
js/vendor/*
webpack.config.js
vite.config.ts
jest.config.js

52
assets/css/common/_base.scss
View file

@ -9,13 +9,13 @@
@import "global";
// Because FA is a SPECIAL SNOWFLAKE.
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~normalize-scss/sass/normalize/import-now";
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "normalize-scss/sass/normalize/import-now";
body {
background-color: $background_color;
@ -469,26 +469,26 @@ span.stat {
@import "shame";
@import "text";
@import "~views/adverts";
@import "~views/approval";
@import "~views/badges";
@import "~views/channels";
@import "~views/comments";
@import "~views/commissions";
@import "~views/communications";
@import "~views/duplicate_reports";
@import "~views/filters";
@import "~views/galleries";
@import "~views/images";
@import "~views/pages";
@import "~views/polls";
@import "~views/posts";
@import "~views/profiles";
@import "~views/pagination";
@import "~views/search";
@import "~views/staff";
@import "~views/stats";
@import "~views/tags";
@import "views/adverts";
@import "views/approval";
@import "views/badges";
@import "views/channels";
@import "views/comments";
@import "views/commissions";
@import "views/communications";
@import "views/duplicate_reports";
@import "views/filters";
@import "views/galleries";
@import "views/images";
@import "views/pages";
@import "views/polls";
@import "views/posts";
@import "views/profiles";
@import "views/pagination";
@import "views/search";
@import "views/staff";
@import "views/stats";
@import "views/tags";
.no-overflow {
overflow: hidden;

2
assets/css/themes/dark.scss
View file

@ -190,4 +190,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
$poll_form_label_background: lighten($border_color, 8);
$tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
@import "common/base";

2
assets/css/themes/default.scss
View file

@ -180,4 +180,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
$poll_form_label_background: lighten($border_color, 8);
$tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
@import "common/base";

2
assets/css/themes/red.scss
View file

@ -192,4 +192,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
$poll_form_label_background: lighten($border_color, 8);
$tag_dropdown_hover_background: darken($meta_color, 4%);
@import "~common/base";
@import "common/base";

1
assets/js/app.js
View file

@ -8,4 +8,3 @@
// Our code
import './ujs';
import './when-ready';
import '../css/themes/default.scss';

4
assets/js/utils/dom.ts
View file

@ -57,8 +57,8 @@ export function makeEl<Tag extends keyof HTMLElementTagNameMap>(tag: Tag, attr?:
if (attr) {
for (const prop in attr) {
const newValue = attr[prop];
if (typeof newValue !== 'undefined') {
el[prop] = newValue as Exclude<typeof newValue, undefined>;
if (newValue) {
el[prop] = newValue;
}
}
}

3276
assets/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

46
assets/package.json
View file

@ -10,41 +10,29 @@
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.3.0",
"@rollup/plugin-multi-entry": "^6.0.0",
"@rollup/plugin-typescript": "^11.0.0",
"@rollup/plugin-virtual": "^3.0.1",
"@types/web": "^0.0.91",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"acorn": "^8.8.2",
"autoprefixer": "^10.4.13",
"brunch": "^4.0.2",
"copycat-brunch": "^1.1.1",
"@fortawesome/fontawesome-free": "^6.5.2",
"@types/web": "^0.0.143",
"@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0",
"autoprefixer": "^10.4.19",
"cross-env": "^7.0.3",
"eslint": "^8.34.0",
"jest-environment-jsdom": "^29.4.3",
"mini-css-extract-plugin": "^2.7.2",
"normalize-scss": "^7.0.1",
"postcss": "^8.4.31",
"postcss-scss": "^4.0.6",
"postcss-url": "^10.1.3",
"rollup": "^2.57.0",
"rollup-plugin-includepaths": "^0.2.4",
"sass": "^1.58.3",
"jest-environment-jsdom": "^29.7.0",
"normalize-scss": "^8.0.0",
"sass": "^1.75.0",
"source-map-support": "^0.5.21",
"tslib": "^2.5.0",
"typescript": "^5.2",
"tslib": "^2.6.2",
"typescript": "^5.4",
"vite": "^5.2"
},
"devDependencies": {
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@types/jest": "^29.4.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jest-dom": "^4.0.3",
"jest": "^29.4.3",
"@testing-library/dom": "^10.1.0",
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^29.5.12",
"eslint-plugin-jest": "^28.3.0",
"eslint-plugin-jest-dom": "^5.4.0",
"jest": "^29.7.0",
"jest-fetch-mock": "^3.0.3",
"ts-jest": "^29.1.0"
"ts-jest": "^29.1.2z"
}
}

42
assets/vite.config.ts
View file

@ -1,13 +1,14 @@
import fs from 'fs';
import path from 'path';
import rollupPluginMultiEntry from '@rollup/plugin-multi-entry';
import { defineConfig } from "vite";
import autoprefixer from 'autoprefixer';
import { defineConfig, UserConfig, ConfigEnv } from 'vite';
export default defineConfig(({ command }: any) => {
const isDev = command !== "build";
export default defineConfig(({ command }: ConfigEnv): UserConfig => {
const isDev = command !== 'build';
if (isDev) {
process.stdin.on("close", () => {
process.stdin.on('close', () => {
// eslint-disable-next-line no-process-exit
process.exit(0);
});
@ -15,11 +16,12 @@ export default defineConfig(({ command }: any) => {
}
const themeNames =
fs.readdirSync(path.resolve(__dirname, 'css/themes')).map(name => {
fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
const m = name.match(/([-a-z]+).scss/);
if (m) m[1]
} );
if (m) { return m[1]; }
return null;
});
const themes = new Map();
@ -28,8 +30,8 @@ export default defineConfig(({ command }: any) => {
}
return {
publicDir: "static",
plugins: [rollupPluginMultiEntry()],
publicDir: 'static',
plugins: [],
resolve: {
alias: {
common: path.resolve(__dirname, 'css/common/'),
@ -37,22 +39,28 @@ export default defineConfig(({ command }: any) => {
}
},
build: {
target: "es2020",
target: 'es2020',
outDir: path.resolve(__dirname, '../priv/static'),
emptyOutDir: true,
emptyOutDir: false,
sourcemap: isDev,
manifest: false,
cssCodeSplit: true,
rollupOptions: {
input: {
'js/app.js': "./js/app.js",
...themes
'js/app': './js/app.js',
...Object.fromEntries(themes)
},
output: {
entryFileNames: "assets/[name].js", // remove hash
chunkFileNames: "assets/[name].js",
assetFileNames: "assets/[name][extname]"
entryFileNames: 'assets/[name].js',
chunkFileNames: '[name].js',
assetFileNames: 'assets/[name][extname]'
}
}
},
css: {
postcss: {
plugins: [autoprefixer]
}
}
};
});

156
assets/webpack.config.js
View file

@ -1,156 +0,0 @@
import fs from 'fs';
import path from 'path';
import url from 'url';
import TerserPlugin from 'terser-webpack-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import IgnoreEmitPlugin from 'ignore-emit-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import autoprefixer from 'autoprefixer';
import rollupPluginIncludepaths from 'rollup-plugin-includepaths';
import rollupPluginMultiEntry from '@rollup/plugin-multi-entry';
import rollupPluginTypescript from '@rollup/plugin-typescript';
const isDevelopment = process.env.NODE_ENV !== 'production';
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
const includePaths = rollupPluginIncludepaths();
const multiEntry = rollupPluginMultiEntry();
const typescript = rollupPluginTypescript();
let plugins = [
new IgnoreEmitPlugin(/css\/.*(?<!css)$/),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new CopyPlugin({
patterns: [
{ from: path.resolve(__dirname, 'static') },
],
}),
];
if (isDevelopment) {
plugins = plugins.concat([
new ESLintPlugin({
extensions: ['js', 'ts'],
failOnError: true,
failOnWarning: isDevelopment
})
]);
}
else {
plugins = plugins.concat([
new TerserPlugin({
parallel: true,
}),
new CssMinimizerPlugin(),
]);
}
const themeNames =
fs.readdirSync(path.resolve(__dirname, 'css/themes')).map(name =>
name.match(/([-a-z]+).scss/)[1]
);
const themes = {};
for (const name of themeNames) {
themes[`css/${name}`] = `./css/themes/${name}.scss`;
}
export default {
mode: isDevelopment ? 'development' : 'production',
entry: {
'js/app.js': './js/app.js',
...themes
},
output: {
filename: '[name]',
path: path.resolve(__dirname, '../priv/static'),
},
optimization: {
minimize: !isDevelopment,
providedExports: true,
usedExports: true,
concatenateModules: true,
},
devtool: isDevelopment ? 'inline-source-map' : undefined,
performance: { hints: false },
resolve: {
alias: {
common: path.resolve(__dirname, 'css/common/'),
views: path.resolve(__dirname, 'css/views/')
}
},
module: {
rules: [
{
test: /\.(ttf|eot|svg|woff2?)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts',
publicPath: '../fonts',
},
dependency: { not: ['url'] },
},
{
test: /app\.js/,
use: [
{
loader: 'webpack-rollup-loader',
options: {
plugins: [
includePaths,
multiEntry,
typescript,
]
}
},
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: isDevelopment,
url: {
filter: (url, _resourcePath) => {
return !url.startsWith('/');
}
}
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
sourceMaps: isDevelopment,
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
autoprefixer(),
],
},
},
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment,
sassOptions: {
quietDeps: true
}
}
},
]
},
],
},
plugins,
};

8
config/dev.exs
View file

@ -8,7 +8,7 @@ config :philomena, Philomena.Repo, show_sensitive_data_on_connection_error: true
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
# with vite to recompile .js and .css sources.
config :philomena, PhilomenaWeb.Endpoint,
http: [port: 4000],
debug_errors: true,
@ -17,6 +17,12 @@ config :philomena, PhilomenaWeb.Endpoint,
watchers: [
node: [
"node_modules/vite/bin/vite.js",
"build",
"--mode",
"development",
"--watch",
"--config",
"vite.config.ts",
cd: Path.expand("../assets", __DIR__)
]
]

2
lib/philomena_web/templates/layout/app.html.slime
View file

@ -19,7 +19,7 @@ html lang="en"
meta name="theme-color" content="#618fc3"
meta name="format-detection" content="telephone=no"
= csrf_meta_tag()
script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js") async="async"
script type="module" src=Routes.static_path(@conn, "/assets/js/app.js")
= render PhilomenaWeb.LayoutView, "_opengraph.html", assigns
body data-theme=theme_name(@current_user)
= render PhilomenaWeb.LayoutView, "_burger.html", assigns

8
lib/philomena_web/views/layout_view.ex
View file

@ -65,16 +65,16 @@ defmodule PhilomenaWeb.LayoutView do
end
def stylesheet_path(conn, %{theme: "dark"}),
do: Routes.static_path(conn, "/css/dark.css")
do: Routes.static_path(conn, "/assets/css/dark.css")
def stylesheet_path(conn, %{theme: "red"}),
do: Routes.static_path(conn, "/css/red.css")
do: Routes.static_path(conn, "/assets/css/red.css")
def stylesheet_path(conn, _user),
do: Routes.static_path(conn, "/css/default.css")
do: Routes.static_path(conn, "/assets/css/default.css")
def dark_stylesheet_path(conn),
do: Routes.static_path(conn, "/css/dark.css")
do: Routes.static_path(conn, "/assets/css/dark.css")
def theme_name(%{theme: theme}), do: theme
def theme_name(_user), do: "default"

6
lib/philomena_web/views/setting_view.ex
View file

@ -6,10 +6,10 @@ defmodule PhilomenaWeb.SettingView do
[
key: "Default",
value: "default",
data: [theme_path: Routes.static_path(conn, "/css/default.css")]
data: [theme_path: Routes.static_path(conn, "/assets/css/default.css")]
],
[key: "Dark", value: "dark", data: [theme_path: Routes.static_path(conn, "/css/dark.css")]],
[key: "Red", value: "red", data: [theme_path: Routes.static_path(conn, "/css/red.css")]]
[key: "Dark", value: "dark", data: [theme_path: Routes.static_path(conn, "/assets/css/dark.css")]],
[key: "Red", value: "red", data: [theme_path: Routes.static_path(conn, "/assets/css/red.css")]]
]
end