chore(client): migrate licenses_view to lit (#2131)

* chore(client): migrate about and language views to lit

* lol let's see if it worked

* come back to this

* moving licenses and just import it directly

* fix type issue

* update imports

* remove copy

* fix test

client/package.json

@@ -115,6 +115,7 @@
     "prettier": "^2.8.0",
     "pretty-quick": "^2.0.1",
     "puppeteer": "^13.1.2",
+    "raw-loader": "^4.0.2",
     "replace-in-file": "^6.3.5",
     "rimraf": "^2.7.1",
     "rmfr": "^2.0.0",

client/src/www/types/shims.d.ts

@@ -18,3 +18,8 @@ declare module '*.png' {
   const value: string;
   export = value;
 }
+
+declare module '*.txt?raw' {
+  const content: string;
+  export default content;
+}

client/src/www/ui_components/app-root.js

@@ -37,7 +37,6 @@ import '@polymer/paper-item/paper-icon-item.js';
 import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-toast/paper-toast.js';
 import './add-server-view.js';
-import './licenses-view.js';
 import './outline-icons.js';
 import './privacy-view.js';
 
@@ -49,6 +48,8 @@ import '../views/contact_view';
 // eslint-disable-next-line n/no-missing-import
 import '../views/language_view';
 // eslint-disable-next-line n/no-missing-import
+import '../views/licenses_view';
+// eslint-disable-next-line n/no-missing-import
 import '../views/servers_view';
 
 import './server-rename-dialog.js';

client/src/www/views/licenses_view/index.ts

@@ -0,0 +1,43 @@
+/*
+  Copyright 2024 The Outline Authors
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/// <reference types="../../types/shims" />
+
+import {LitElement, html, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import licenses from './licenses/licenses.txt?raw';
+
+@customElement('licenses-view')
+export class LicensesView extends LitElement {
+  static styles = css`
+    :host {
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      padding: 12px;
+      width: 100%;
+    }
+
+    code {
+      font-size: 0.7em;
+    }
+  `;
+
+  render() {
+    return html`<code>${licenses}</code>`;
+  }
+}

client/src/www/ui_components/licenses/README.md → client/src/www/views/licenses_view/licenses/README.md

@@ -4,7 +4,7 @@
 
 - `cd` to the root of your clone of this repo.
 - Ensure `node_modules` is up to date by running `npm ci`.
-- `npx generate-license-file --input package.json --output client/src/www/ui_components/licenses/licenses.txt`
-- `./client/src/www/ui_components/licenses/third_party.sh >> ./client/src/www/ui_components/licenses/licenses.txt`
+- `npx generate-license-file --input package.json --output client/src/www/views/licenses_view/licenses/licenses.txt`
+- `./client/src/www/views/licenses_view/licenses/third_party.sh >> ./client/src/www/views/licenses_view/licenses/licenses.txt`
 
 Done!

client/src/www/views/licenses_view/stories.ts

@@ -0,0 +1,23 @@
+/*
+  Copyright 2024 The Outline Authors
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import {html} from 'lit';
+
+import './index';
+
+export default {
+  title: 'Client/Licenses View',
+  component: 'licenses-view',
+};
+
+export const Example = () => html`<licenses-view></licenses-view>`;

client/src/www/webpack_base.mjs

@@ -22,7 +22,10 @@ export const require = createRequire(import.meta.url);
 export const __filename = fileURLToPath(import.meta.url);
 export const __dirname = path.dirname(__filename);
 
-export const GENERATE_CSS_RTL_LOADER = path.resolve(__dirname, 'webpack_css_rtl_loader.cjs');
+export const GENERATE_CSS_RTL_LOADER = path.resolve(
+  __dirname,
+  'webpack_css_rtl_loader.cjs'
+);
 
 export const TS_LOADER = {
   loader: 'ts-loader',
@@ -49,7 +52,8 @@ export const baseConfig = {
   },
   externals: {
     // See https://github.com/modernweb-dev/web/issues/1908.
-    '/__web-dev-server__web-socket.js': 'commonjs __web-dev-server__web-socket.js',
+    '/__web-dev-server__web-socket.js':
+      'commonjs __web-dev-server__web-socket.js',
   },
 };
 
@@ -76,7 +80,6 @@ export const browserConfig = {
       [
         {from: 'assets', to: 'assets'},
         {from: 'messages', to: 'messages'},
-        {from: 'ui_components/licenses/licenses.txt', to: 'ui_components/licenses'},
       ],
       {context: __dirname}
     ),

client/src/www/webpack_cordova.mjs

@@ -19,7 +19,14 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import {merge} from 'webpack-merge';
 
-import {baseConfig, browserConfig, require, __dirname, TS_LOADER, GENERATE_CSS_RTL_LOADER} from './webpack_base.mjs';
+import {
+  baseConfig,
+  browserConfig,
+  require,
+  __dirname,
+  TS_LOADER,
+  GENERATE_CSS_RTL_LOADER,
+} from './webpack_base.mjs';
 
 const BABEL_LOADER = {
   loader: 'babel-loader',
@@ -57,11 +64,22 @@ export default merge(baseConfig, browserConfig, {
         include: /node_modules/,
         use: [BABEL_LOADER],
       },
+      {
+        test: /\.txt$/i,
+        loader: 'raw-loader',
+      },
     ],
   },
   plugins: [
     new CopyPlugin(
-      [{from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'), to: 'webcomponentsjs'}],
+      [
+        {
+          from: require.resolve(
+            '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
+          ),
+          to: 'webcomponentsjs',
+        },
+      ],
       {context: __dirname}
     ),
     new webpack.DefinePlugin({

client/src/www/webpack_electron.mjs

@@ -17,7 +17,13 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import {merge} from 'webpack-merge';
 
-import {baseConfig, browserConfig, __dirname, TS_LOADER, GENERATE_CSS_RTL_LOADER} from './webpack_base.mjs';
+import {
+  baseConfig,
+  browserConfig,
+  __dirname,
+  TS_LOADER,
+  GENERATE_CSS_RTL_LOADER,
+} from './webpack_base.mjs';
 
 export default merge(baseConfig, browserConfig, {
   entry: [path.resolve(__dirname, 'app', 'main.electron.ts')],
@@ -39,6 +45,10 @@ export default merge(baseConfig, browserConfig, {
         exclude: /node_modules/,
         use: [GENERATE_CSS_RTL_LOADER],
       },
+      {
+        test: /\.txt$/i,
+        loader: 'raw-loader',
+      },
     ],
   },
   plugins: [

client/src/www/webpack_test.mjs

@@ -33,6 +33,10 @@ export default merge(baseConfig, {
         test: /\.png$/,
         use: ['file-loader'],
       },
+      {
+        test: /\.txt$/i,
+        loader: 'raw-loader',
+      },
     ],
   },
 });