feat: support ssr (#28)

* chore: upgrade dependencies * feat: add new problem * feat: support ssr * refactor: refactor some code * chore: delete ssr output * fix: theme script place
type-challenges · Nov 16, 2023 · 59969c3 · 59969c3
1 parent 3206cb2
commit 59969c3
Show file tree

Hide file tree

Showing 35 changed files with 1,212 additions and 897 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,6 +4,9 @@
     "node": true,
     "browser": true
   },
+  "globals": {
+    "WEBPACK_IS_SSR": true
+  },
   "plugins": [
     "react",
     "import",

diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,3 @@ node_modules
 .npmignore
 .DS_Store
 yarn-error.log
-output
diff --git a/html/index.html b/html/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang='en'>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TypeScript Tutorial Exercises</title>
   </head>
   <body>
-    <div id="root"></div>
+    <script>try{if(JSON.parse(localStorage.getItem('__setting_cache__')).theme==='dark'){document.body.setAttribute('arco-theme','dark');}}catch{}</script>
+    <div id="root">
+      <%= ROOT_CONTENT %>
+    </div>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,8 +10,9 @@
     "reset": "rm -rf node_modules",
     "setup": "yarn reset && yarn",
     "clean": "rm -rf dist",
-    "dev": "rspack serve --watch --mode=development",
-    "build": "yarn clean && rspack build --mode=production",
+    "dev": "rspack serve --watch",
+    "build:ssr": "yarn clean && rspack build --config=rspack.ssr.config.ts",
+    "build": "yarn build:ssr && rspack build && rm -rf dist/ssr",
     "lint": "eslint --fix --color --cache --quiet .",
     "prepare": "husky install"
   },
@@ -52,6 +53,7 @@
   "devDependencies": {
     "@arco-plugins/unplugin-react": "^1.0.0-alpha.1",
     "@rspack/cli": "^0.3.5",
+    "@rspack/plugin-html": "^0.3.11",
     "@svgr/webpack": "^8.1.0",
     "@types/event-emitter": "^0.3.4",
     "@types/lodash.debounce": "^4.0.7",

diff --git a/problems/.eslintrc.json b/problems/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": ["../.eslintrc.json"],
+  "rules": {
+    "compat/compat": "off"
+  }
+}
diff --git a/problems/basic-tutorial/2-everyday-types/check.ts b/problems/basic-tutorial/2-everyday-types/check.ts
@@ -6,8 +6,14 @@ assert<Equal<typeof constant.str, string>>();
 // @ts-ignore
 assert<Equal<typeof constant.num, number>>();
 // @ts-ignore
+assert<Equal<typeof constant.big_int, bigint>>();
+// @ts-ignore
 assert<Equal<typeof constant.bool, boolean>>();
 // @ts-ignore
+assert<Equal<typeof constant.mySymbol, symbol>>();
+// @ts-ignore
+assert<Equal<typeof constant.undef, undefined>>();
+// @ts-ignore
 assert<Equal<typeof constant.arr, number[]>>();
 // @ts-ignore
 assert<Equal<Parameters<typeof constant.greet>[0], string>>();

diff --git a/problems/basic-tutorial/2-everyday-types/docs/tutorial/tutorial.en.md b/problems/basic-tutorial/2-everyday-types/docs/tutorial/tutorial.en.md
@@ -1,8 +1,11 @@
 ```typescript
 export const str: string = 'Hello, world';
 export const num: number = 42;
+export const big_int: bigint = 1n;
 export const bool: boolean = true || false;
-export const arr: number[] = [1];
+export const mySymbol: symbol = Symbol('mySymbol');
+export const undef: undefined = undefined;
+export const arr: number[] = [1, 2, 3];
 
 export function greet(name: string): void {
   return console.log('Hello, ' + name.toUpperCase() + '!!');
@@ -13,6 +16,7 @@ export function printName(obj: { first: string; last?: string }): string {
   return `${last}${first}`;
 }
 
+// should be `string` or `number`
 export function printId(id: string | number) {
   if (typeof id === 'string') {
     // In this branch, id is of type 'string'

diff --git a/problems/basic-tutorial/2-everyday-types/template.ts b/problems/basic-tutorial/2-everyday-types/template.ts
@@ -1,7 +1,10 @@
 export const str: unknown = 'Hello, world';
 export const num: unknown = 42;
+export const big_int: unknown = 1n;
 export const bool: unknown = true || false;
-export const arr: unknown = [];
+export const mySymbol: unknown = Symbol('mySymbol');
+export const undef: unknown = undefined;
+export const arr: unknown = [1, 2, 3];
 
 export function greet(name: any): unknown {
   return console.log('Hello, ' + name.toUpperCase() + '!!');
@@ -12,6 +15,7 @@ export function printName(obj: { first: unknown; last?: unknown }): unknown {
   return `${last}${first}`;
 }
 
+// should be `string` or `number`
 export function printId(id: unknown) {
   if (typeof id === 'string') {
     // In this branch, id is of type 'string'

diff --git a/problems/basic-tutorial/3-narrowing/check.ts b/problems/basic-tutorial/3-narrowing/check.ts
diff --git a/problems/basic-tutorial/3-narrowing/docs/description/description.en.md b/problems/basic-tutorial/3-narrowing/docs/description/description.en.md
@@ -0,0 +1,32 @@
+### What is TypeScript
+
+TypeScript is a syntactic superset of JavaScript which adds static typing.
+
+This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.
+
+### Why TypeScript
+
+JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.
+
+In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation, or guess based on the implementation.
+
+TypeScript allows specifying the types of data being passed around within the code, and has the ability to report errors when the types don't match.
+
+For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.
+
+### About this site
+
+To teach more people to use TypeScript including basic and advanced usage, we create this site which provides some problems should be solved by TypeScript. And part of the answers of the problems could be found at [official TypeScript document](https://www.typescriptlang.org/).
+
+This problem require you to export a type which equals to string `Hello, world`.
+
+Now, you can go to the editor at right of the page to start your TypeScript travel.
+
+**Reference**
+
+> 1.https://www.typescriptlang.org/
+> 
+> 2.https://www.w3schools.com/typescript/typescript_intro.php
+> 
+> 3.https://github.com/typescript-exercises/typescript-exercises
+
diff --git a/problems/basic-tutorial/3-narrowing/docs/description/description.zh-cn.md b/problems/basic-tutorial/3-narrowing/docs/description/description.zh-cn.md
@@ -0,0 +1,31 @@
+### 关于 TypeScript
+
+TypeScript 是 JavaScript 的语法超集，它添加了静态类型
+
+这意味着 TypeScript 在 JavaScript 之上添加了语法，允许开发人员添加类型
+
+### 为什么选择 TypeScript
+
+JavaScript 是一种松散类型语言。 理解 JavaScript 中传递的数据类型可能很困难
+
+在 JavaScript 中，函数参数和变量没有任何信息！因此开发人员需要查看文档，或者根据实现进行猜测
+
+TypeScript 允许指定代码中传递的数据类型，并且能够在类型不匹配时报告错误
+
+例如，当将字符串传递到需要数字的函数时，TypeScript 将报告错误而 JavaScript 不会
+
+### 关于本站
+
+为了教会更多的人使用 TypeScript（包括基本和高级用法），我们创建了这个网站，根据 [TypeScript 官方文档](https://www.typescriptlang.org/)提供了从入门到精通 TypeScript 的练习题
+
+这个问题要求你导出一个等于字符串`Hello, world`的类型
+
+现在，您可以前往页面右侧的编辑器开始学习 TypeScript
+
+**参考**
+
+> 1.https://www.typescriptlang.org/
+>
+> 2.https://www.w3schools.com/typescript/typescript_intro.php
+>
+> 3.https://github.com/typescript-exercises/typescript-exercises
diff --git a/problems/basic-tutorial/3-narrowing/docs/description/index.ts b/problems/basic-tutorial/3-narrowing/docs/description/index.ts
@@ -0,0 +1,4 @@
+import en from './description.en.md?url';
+import zhCN from './description.zh-cn.md?url';
+
+export { en, zhCN };
diff --git a/problems/basic-tutorial/3-narrowing/docs/tutorial/index.ts b/problems/basic-tutorial/3-narrowing/docs/tutorial/index.ts
@@ -0,0 +1,3 @@
+import en from './tutorial.en.md?url';
+
+export { en };
diff --git a/problems/basic-tutorial/3-narrowing/docs/tutorial/tutorial.en.md b/problems/basic-tutorial/3-narrowing/docs/tutorial/tutorial.en.md
@@ -0,0 +1,3 @@
+```typescript
+export type HelloWorld = 'Hello, world';
+```
diff --git a/problems/basic-tutorial/3-narrowing/index.ts b/problems/basic-tutorial/3-narrowing/index.ts
@@ -0,0 +1,6 @@
+import check from './check?url';
+import template from './template?url';
+import * as description from './docs/description';
+import * as tutorial from './docs/tutorial';
+
+export { check, template, tutorial, description };
diff --git a/problems/basic-tutorial/3-narrowing/template.ts b/problems/basic-tutorial/3-narrowing/template.ts
@@ -0,0 +1,8 @@
+export function padLeft(padding: unknown, input: string) {
+  if (typeof padding === 'number') {
+    return ' '.repeat(padding) + input;
+  } else if (typeof padding === 'string') {
+    return padding + input;
+  }
+  return input;
+}
diff --git a/problems/global.d.ts b/problems/global.d.ts
@@ -0,0 +1,9 @@
+declare module '*?raw' {
+  const raw: string;
+  export default raw;
+}
+
+declare module '*?url' {
+  const url: string;
+  export default url;
+}
diff --git a/problems/tsconfig.json b/problems/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "noImplicitAny": false
+  },
+  "include": ["."],
+  "exclude": []
+}
diff --git a/problems/type-assertions.ts b/problems/type-assertions.ts
@@ -0,0 +1,3 @@
+import typeAssertions from '../node_modules/type-assertions/lib/index.d.ts?raw';
+
+export default typeAssertions;
diff --git a/rspack.base.config.ts b/rspack.base.config.ts
@@ -0,0 +1,76 @@
+import path from 'path';
+import type { Configuration } from '@rspack/cli';
+
+export default function createBaseRspackConfig(): Configuration {
+  return {
+    context: __dirname,
+    entry: {
+      main: './src/main.tsx',
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].[contenthash:8].bundle.js',
+      chunkFilename: '[name].[contenthash:8].bundle.js',
+      cssChunkFilename: '[name].[contenthash:8].bundle.js',
+    },
+    resolve: {
+      alias: {
+        '@config': path.resolve(__dirname, './config'),
+        '@problems': path.resolve(__dirname, './problems'),
+        '@src': path.resolve(__dirname, './src'),
+      },
+    },
+    builtins: {
+      css: {
+        modules: {
+          localIdentName: '[path][name]__[local]--[hash:6]',
+        },
+      },
+    },
+    module: {
+      rules: [
+        {
+          resourceQuery: /url$/,
+          type: 'asset/resource',
+        },
+        {
+          resourceQuery: /raw$/,
+          type: 'asset/source',
+        },
+        {
+          test: /\.less$/i,
+          use: [
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                },
+              },
+            },
+          ],
+          type: 'css',
+        },
+        {
+          test: /\.module\.less$/i,
+          use: [
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                },
+              },
+            },
+          ],
+          type: 'css/module',
+        },
+        {
+          test: /\.svg$/,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
+        },
+      ],
+    },
+  };
+}