From 86c39e6b12ee8bd8094e3f0d8b5504a6e380a302 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Thu, 11 Jun 2020 19:27:15 +0800 Subject: [PATCH] remove inline scripts as possible --- .gitignore | 1 + app/Http/View/Composers/HeadComposer.php | 17 ++++++++++++- app/Listeners/SerializeGlobals.php | 22 ----------------- app/Providers/EventServiceProvider.php | 3 --- package.json | 3 ++- resources/assets/src/scripts/app.ts | 1 + resources/assets/src/scripts/extra.ts | 12 ++++++++++ resources/assets/src/scripts/home-page.ts | 8 +++++-- resources/assets/src/scripts/meta.ts | 9 +++++++ resources/views/admin/customize.twig | 4 ++-- resources/views/admin/users.twig | 4 ++-- resources/views/auth/forgot.twig | 7 ++---- resources/views/auth/login.twig | 7 ++---- resources/views/auth/register.twig | 7 ++---- resources/views/home.twig | 4 ++-- resources/views/shared/head.twig | 7 ++---- resources/views/skinlib/index.twig | 4 ++-- resources/views/skinlib/show.twig | 9 +++---- resources/views/skinlib/upload.twig | 4 ++-- resources/views/user/closet.twig | 6 ++--- resources/views/user/index.twig | 6 ++--- resources/views/user/player.twig | 4 +++- scripts/build.ps1 | 1 - webpack.config.js | 8 +------ webpack.meta.config.js | 29 +++++++++++++++++++++++ 25 files changed, 105 insertions(+), 82 deletions(-) delete mode 100644 app/Listeners/SerializeGlobals.php create mode 100644 resources/assets/src/scripts/extra.ts create mode 100644 resources/assets/src/scripts/meta.ts create mode 100644 webpack.meta.config.js diff --git a/.gitignore b/.gitignore index bf8e112b..98edd66e 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ storage/options.php .php_cs.cache resources/views/overrides public/sw.js +public/meta.js diff --git a/app/Http/View/Composers/HeadComposer.php b/app/Http/View/Composers/HeadComposer.php index 43479552..1d3724e9 100644 --- a/app/Http/View/Composers/HeadComposer.php +++ b/app/Http/View/Composers/HeadComposer.php @@ -43,6 +43,7 @@ class HeadComposer $this->seo($view); $this->injectStyles($view); $this->addExtra($view); + $this->serializeGlobals($view); } public function addFavicon(View $view) @@ -112,7 +113,7 @@ class HeadComposer 'integrity' => 'sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=', 'crossorigin' => 'anonymous', ]; - if (!$this->request->is('/')) { + if (!$this->request->is('/') && config('app.asset.env') !== 'development') { $links[] = [ 'rel' => 'stylesheet', 'href' => $this->webpack->url('style.css'), @@ -131,4 +132,18 @@ class HeadComposer $this->dispatcher->dispatch(new \App\Events\RenderingHeader($content)); $view->with('extra_head', $content); } + + public function serializeGlobals(View $view) + { + $blessing = [ + 'version' => config('app.version'), + 'locale' => config('app.locale'), + 'base_url' => url('/'), + 'site_name' => option_localized('site_name'), + 'route' => request()->path(), + 'i18n' => new \stdClass(), + 'extra' => [], + ]; + $view->with('blessing', $blessing); + } } diff --git a/app/Listeners/SerializeGlobals.php b/app/Listeners/SerializeGlobals.php deleted file mode 100644 index 318c8fb3..00000000 --- a/app/Listeners/SerializeGlobals.php +++ /dev/null @@ -1,22 +0,0 @@ - config('app.version'), - 'locale' => config('app.locale'), - 'base_url' => url('/'), - 'site_name' => option_localized('site_name'), - 'route' => request()->path(), - 'i18n' => new stdClass(), - 'extra' => [], - ]; - $event->addContent(''); - } -} diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php index ce3136db..81f6ecc9 100644 --- a/app/Providers/EventServiceProvider.php +++ b/app/Providers/EventServiceProvider.php @@ -20,9 +20,6 @@ class EventServiceProvider extends ServiceProvider 'App\Events\PluginBootFailed' => [ Listeners\NotifyFailedPlugin::class, ], - 'App\Events\RenderingHeader' => [ - Listeners\SerializeGlobals::class, - ], 'auth.registration.completed' => [ Listeners\SendEmailVerification::class, ], diff --git a/package.json b/package.json index 1fd5b293..47dbeda2 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "private": true, "scripts": { "dev": "webpack-dev-server", - "build": "webpack --mode=production -p --progress", + "build": "webpack -p --progress && webpack -p --config=webpack.meta.config.js", "lint": "eslint --ext=ts -f=beauty .", "fmt": "prettier --write resources/assets", "test": "jest", @@ -198,6 +198,7 @@ "coveragePathIgnorePatterns": [ "/node_modules/", "/resources/assets/src/styles", + "/resources/assets/src/scripts/extra.ts", "/resources/assets/src/scripts/urls.ts", "/resources/assets/tests/setup", "/resources/assets/tests/utils", diff --git a/resources/assets/src/scripts/app.ts b/resources/assets/src/scripts/app.ts index 1a7714e1..725246ce 100644 --- a/resources/assets/src/scripts/app.ts +++ b/resources/assets/src/scripts/app.ts @@ -1,4 +1,5 @@ import './init' // Must be first +import './extra' import './i18n' import './net' import './event' diff --git a/resources/assets/src/scripts/extra.ts b/resources/assets/src/scripts/extra.ts new file mode 100644 index 00000000..1362bf6d --- /dev/null +++ b/resources/assets/src/scripts/extra.ts @@ -0,0 +1,12 @@ +export function getExtraData(): any { + const jsonElement = document.querySelector('#blessing-extra') + /* istanbul ignore next */ + if (jsonElement) { + return JSON.parse(jsonElement.textContent ?? '{}') + } +} + +const extraData = getExtraData() +if (extraData) { + blessing.extra = extraData +} diff --git a/resources/assets/src/scripts/home-page.ts b/resources/assets/src/scripts/home-page.ts index f860decc..b1d65342 100644 --- a/resources/assets/src/scripts/home-page.ts +++ b/resources/assets/src/scripts/home-page.ts @@ -1,4 +1,5 @@ import '@/styles/home.css' +import { getExtraData } from './extra' export function scrollHander() { const header = document.querySelector('.navbar') @@ -28,8 +29,11 @@ export async function logout() { } /* istanbul ignore next */ -if (blessing.extra.transparent_navbar) { - window.addEventListener('load', scrollHander) +if (process.env.NODE_ENV !== 'test') { + const { transparent_navbar }: { transparent_navbar: boolean } = getExtraData() + if (transparent_navbar) { + window.addEventListener('load', scrollHander) + } } /* istanbul ignore next */ document diff --git a/resources/assets/src/scripts/meta.ts b/resources/assets/src/scripts/meta.ts new file mode 100644 index 00000000..126bafae --- /dev/null +++ b/resources/assets/src/scripts/meta.ts @@ -0,0 +1,9 @@ +{ + const blessingElement = document.querySelector('#blessing-globals')! + // @ts-ignore + window.blessing = JSON.parse(blessingElement.textContent!) + + window.addEventListener('load', () => { + navigator.serviceWorker.register('/sw.js?v4') + }) +} diff --git a/resources/views/admin/customize.twig b/resources/views/admin/customize.twig index aa366a7c..b51e2bbd 100644 --- a/resources/views/admin/customize.twig +++ b/resources/views/admin/customize.twig @@ -71,7 +71,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/admin/users.twig b/resources/views/admin/users.twig index 138dba3f..4f711a51 100644 --- a/resources/views/admin/users.twig +++ b/resources/views/admin/users.twig @@ -4,7 +4,7 @@ {% block before_foot %} {% set extra = {'currentUser': auth_user()} %} - {% endblock %} diff --git a/resources/views/auth/forgot.twig b/resources/views/auth/forgot.twig index 7c5a1dc6..141f2960 100644 --- a/resources/views/auth/forgot.twig +++ b/resources/views/auth/forgot.twig @@ -13,10 +13,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/auth/login.twig b/resources/views/auth/login.twig index ed44bc0f..a032bbc2 100644 --- a/resources/views/auth/login.twig +++ b/resources/views/auth/login.twig @@ -9,10 +9,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/auth/register.twig b/resources/views/auth/register.twig index 06d588aa..0fbcc18e 100644 --- a/resources/views/auth/register.twig +++ b/resources/views/auth/register.twig @@ -9,10 +9,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/home.twig b/resources/views/home.twig index 65c264f0..2dbf11e2 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -158,8 +158,8 @@ {% if home_page_css_loader %} {% endif %} - {{ include('shared.foot') }} diff --git a/resources/views/shared/head.twig b/resources/views/shared/head.twig index be8e81d0..9c537659 100644 --- a/resources/views/shared/head.twig +++ b/resources/views/shared/head.twig @@ -10,11 +10,8 @@ {% if custom_cdn_host %} {% endif %} - + + {% for link in links %} {% endfor %} diff --git a/resources/views/skinlib/index.twig b/resources/views/skinlib/index.twig index 1b3366e8..47bc8575 100644 --- a/resources/views/skinlib/index.twig +++ b/resources/views/skinlib/index.twig @@ -7,7 +7,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/skinlib/show.twig b/resources/views/skinlib/show.twig index 7e687ede..d468a60a 100644 --- a/resources/views/skinlib/show.twig +++ b/resources/views/skinlib/show.twig @@ -30,10 +30,7 @@ {% endblock %} {% block before_foot %} - + {% endblock %} diff --git a/resources/views/skinlib/upload.twig b/resources/views/skinlib/upload.twig index 9a8fd9b6..813fe27f 100644 --- a/resources/views/skinlib/upload.twig +++ b/resources/views/skinlib/upload.twig @@ -27,7 +27,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/user/closet.twig b/resources/views/user/closet.twig index f66d0fca..19dc3b25 100644 --- a/resources/views/user/closet.twig +++ b/resources/views/user/closet.twig @@ -9,9 +9,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/user/index.twig b/resources/views/user/index.twig index 82856531..a298e435 100644 --- a/resources/views/user/index.twig +++ b/resources/views/user/index.twig @@ -36,9 +36,7 @@ {% endblock %} {% block before_foot %} - {% endblock %} diff --git a/resources/views/user/player.twig b/resources/views/user/player.twig index 204d806a..6ed8f4e1 100644 --- a/resources/views/user/player.twig +++ b/resources/views/user/player.twig @@ -9,5 +9,7 @@ {% endblock %} {% block before_foot %} - + {% endblock %} diff --git a/scripts/build.ps1 b/scripts/build.ps1 index 82dc800c..83ec8684 100644 --- a/scripts/build.ps1 +++ b/scripts/build.ps1 @@ -12,7 +12,6 @@ if (Test-Path ./public/app) { # Run webpack yarn build -Move-Item -Path ./public/app/sw.js -Destination ./public -Force if ($Simple) { exit diff --git a/webpack.config.js b/webpack.config.js index dee92b24..c20fdd33 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,7 +11,6 @@ const config = { mode: devMode ? 'development' : 'production', entry: { app: ['react-hot-loader/patch', '@/index.tsx'], - sw: '@/scripts/sw.ts', style: ['@/styles/common.css'], home: '@/scripts/home-page.ts', spectre: [ @@ -22,12 +21,7 @@ const config = { }, output: { path: `${__dirname}/public/app`, - filename: ({ chunk }) => - chunk.name === 'sw' - ? 'sw.js' - : devMode - ? '[name].js' - : '[name].[contenthash:7].js', + filename: devMode ? '[name].js' : '[name].[contenthash:7].js', chunkFilename: devMode ? '[id].js' : '[id].[contenthash:7].js', }, module: { diff --git a/webpack.meta.config.js b/webpack.meta.config.js new file mode 100644 index 00000000..d9696054 --- /dev/null +++ b/webpack.meta.config.js @@ -0,0 +1,29 @@ +const devMode = !process.argv.includes('-p') + +module.exports = { + mode: devMode ? 'development' : 'production', + entry: { + meta: './resources/assets/src/scripts/meta.ts', + sw: './resources/assets/src/scripts/sw.ts', + }, + output: { + path: `${__dirname}/public`, + filename: '[name].js', + }, + module: { + rules: [ + { + test: /\.ts$/, + loader: 'ts-loader', + options: { + configFile: 'tsconfig.build.json', + transpileOnly: true, + }, + }, + ], + }, + resolve: { + extensions: ['.js', '.ts', '.tsx', '.json'], + }, + stats: 'errors-only', +}