Skip to content

Commit 59969c3

Browse files
ZLY201ZLY201
authored
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
1 parent 3206cb2 commit 59969c3

35 files changed

+1212
-897
lines changed

‎.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"node": true,
55
"browser": true
66
},
7+
"globals": {
8+
"WEBPACK_IS_SSR": true
9+
},
710
"plugins": [
811
"react",
912
"import",

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,3 @@ node_modules
77
.npmignore
88
.DS_Store
99
yarn-error.log
10-
output

‎html/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<!DOCTYPE html>
2-
<html lang="zh-CN">
2+
<html lang='en'>
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>TypeScript Tutorial Exercises</title>
77
</head>
88
<body>
9-
<div id="root"></div>
9+
<script>try{if(JSON.parse(localStorage.getItem('__setting_cache__')).theme==='dark'){document.body.setAttribute('arco-theme','dark');}}catch{}</script>
10+
<div id="root">
11+
<%= ROOT_CONTENT %>
12+
</div>
1013
</body>
1114
</html>

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010
"reset": "rm -rf node_modules",
1111
"setup": "yarn reset && yarn",
1212
"clean": "rm -rf dist",
13-
"dev": "rspack serve --watch --mode=development",
14-
"build": "yarn clean && rspack build --mode=production",
13+
"dev": "rspack serve --watch",
14+
"build:ssr": "yarn clean && rspack build --config=rspack.ssr.config.ts",
15+
"build": "yarn build:ssr && rspack build && rm -rf dist/ssr",
1516
"lint": "eslint --fix --color --cache --quiet .",
1617
"prepare": "husky install"
1718
},
@@ -52,6 +53,7 @@
5253
"devDependencies": {
5354
"@arco-plugins/unplugin-react": "^1.0.0-alpha.1",
5455
"@rspack/cli": "^0.3.5",
56+
"@rspack/plugin-html": "^0.3.11",
5557
"@svgr/webpack": "^8.1.0",
5658
"@types/event-emitter": "^0.3.4",
5759
"@types/lodash.debounce": "^4.0.7",

‎problems/.eslintrc.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": ["../.eslintrc.json"],
3+
"rules": {
4+
"compat/compat": "off"
5+
}
6+
}

‎problems/basic-tutorial/2-everyday-types/check.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@ assert<Equal<typeof constant.str, string>>();
66
// @ts-ignore
77
assert<Equal<typeof constant.num, number>>();
88
// @ts-ignore
9+
assert<Equal<typeof constant.big_int, bigint>>();
10+
// @ts-ignore
911
assert<Equal<typeof constant.bool, boolean>>();
1012
// @ts-ignore
13+
assert<Equal<typeof constant.mySymbol, symbol>>();
14+
// @ts-ignore
15+
assert<Equal<typeof constant.undef, undefined>>();
16+
// @ts-ignore
1117
assert<Equal<typeof constant.arr, number[]>>();
1218
// @ts-ignore
1319
assert<Equal<Parameters<typeof constant.greet>[0], string>>();

‎problems/basic-tutorial/2-everyday-types/docs/tutorial/tutorial.en.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
```typescript
22
export const str: string = 'Hello, world';
33
export const num: number = 42;
4+
export const big_int: bigint = 1n;
45
export const bool: boolean = true || false;
5-
export const arr: number[] = [1];
6+
export const mySymbol: symbol = Symbol('mySymbol');
7+
export const undef: undefined = undefined;
8+
export const arr: number[] = [1, 2, 3];
69

710
export function greet(name: string): void {
811
return console.log('Hello, ' + name.toUpperCase() + '!!');
@@ -13,6 +16,7 @@ export function printName(obj: { first: string; last?: string }): string {
1316
return `${last}${first}`;
1417
}
1518

19+
// should be `string` or `number`
1620
export function printId(id: string | number) {
1721
if (typeof id === 'string') {
1822
// In this branch, id is of type 'string'

‎problems/basic-tutorial/2-everyday-types/template.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
export const str: unknown = 'Hello, world';
22
export const num: unknown = 42;
3+
export const big_int: unknown = 1n;
34
export const bool: unknown = true || false;
4-
export const arr: unknown = [];
5+
export const mySymbol: unknown = Symbol('mySymbol');
6+
export const undef: unknown = undefined;
7+
export const arr: unknown = [1, 2, 3];
58

69
export function greet(name: any): unknown {
710
return console.log('Hello, ' + name.toUpperCase() + '!!');
@@ -12,6 +15,7 @@ export function printName(obj: { first: unknown; last?: unknown }): unknown {
1215
return `${last}${first}`;
1316
}
1417

18+
// should be `string` or `number`
1519
export function printId(id: unknown) {
1620
if (typeof id === 'string') {
1721
// In this branch, id is of type 'string'

‎problems/basic-tutorial/3-narrowing/check.ts

Whitespace-only changes.

‎problems/basic-tutorial/3-narrowing/docs/description/description.en.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
### What is TypeScript
2+
3+
TypeScript is a syntactic superset of JavaScript which adds static typing.
4+
5+
This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.
6+
7+
### Why TypeScript
8+
9+
JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.
10+
11+
In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation, or guess based on the implementation.
12+
13+
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.
14+
15+
For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.
16+
17+
### About this site
18+
19+
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/).
20+
21+
This problem require you to export a type which equals to string `Hello, world`.
22+
23+
Now, you can go to the editor at right of the page to start your TypeScript travel.
24+
25+
**Reference**
26+
27+
> 1.https://www.typescriptlang.org/
28+
>
29+
> 2.https://www.w3schools.com/typescript/typescript_intro.php
30+
>
31+
> 3.https://github.com/typescript-exercises/typescript-exercises
32+

‎problems/basic-tutorial/3-narrowing/docs/description/description.zh-cn.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### 关于 TypeScript
2+
3+
TypeScript 是 JavaScript 的语法超集，它添加了静态类型
4+
5+
这意味着 TypeScript 在 JavaScript 之上添加了语法，允许开发人员添加类型
6+
7+
### 为什么选择 TypeScript
8+
9+
JavaScript 是一种松散类型语言。 理解 JavaScript 中传递的数据类型可能很困难
10+
11+
在 JavaScript 中，函数参数和变量没有任何信息！因此开发人员需要查看文档，或者根据实现进行猜测
12+
13+
TypeScript 允许指定代码中传递的数据类型，并且能够在类型不匹配时报告错误
14+
15+
例如，当将字符串传递到需要数字的函数时，TypeScript 将报告错误而 JavaScript 不会
16+
17+
### 关于本站
18+
19+
为了教会更多的人使用 TypeScript（包括基本和高级用法），我们创建了这个网站，根据 [TypeScript 官方文档](https://www.typescriptlang.org/)提供了从入门到精通 TypeScript 的练习题
20+
21+
这个问题要求你导出一个等于字符串`Hello, world`的类型
22+
23+
现在，您可以前往页面右侧的编辑器开始学习 TypeScript
24+
25+
**参考**
26+
27+
> 1.https://www.typescriptlang.org/
28+
>
29+
> 2.https://www.w3schools.com/typescript/typescript_intro.php
30+
>
31+
> 3.https://github.com/typescript-exercises/typescript-exercises

‎problems/basic-tutorial/3-narrowing/docs/description/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import en from './description.en.md?url';
2+
import zhCN from './description.zh-cn.md?url';
3+
4+
export { en, zhCN };

‎problems/basic-tutorial/3-narrowing/docs/tutorial/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import en from './tutorial.en.md?url';
2+
3+
export { en };

‎problems/basic-tutorial/3-narrowing/docs/tutorial/tutorial.en.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```typescript
2+
export type HelloWorld = 'Hello, world';
3+
```

‎problems/basic-tutorial/3-narrowing/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import check from './check?url';
2+
import template from './template?url';
3+
import * as description from './docs/description';
4+
import * as tutorial from './docs/tutorial';
5+
6+
export { check, template, tutorial, description };

‎problems/basic-tutorial/3-narrowing/template.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function padLeft(padding: unknown, input: string) {
2+
if (typeof padding === 'number') {
3+
return ' '.repeat(padding) + input;
4+
} else if (typeof padding === 'string') {
5+
return padding + input;
6+
}
7+
return input;
8+
}

‎problems/global.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*?raw' {
2+
const raw: string;
3+
export default raw;
4+
}
5+
6+
declare module '*?url' {
7+
const url: string;
8+
export default url;
9+
}

‎problems/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"baseUrl": ".",
5+
"target": "ESNext",
6+
"noImplicitAny": false
7+
},
8+
"include": ["."],
9+
"exclude": []
10+
}

‎problems/type-assertions.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import typeAssertions from '../node_modules/type-assertions/lib/index.d.ts?raw';
2+
3+
export default typeAssertions;

‎rspack.base.config.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import path from 'path';
2+
import type { Configuration } from '@rspack/cli';
3+
4+
export default function createBaseRspackConfig(): Configuration {
5+
return {
6+
context: __dirname,
7+
entry: {
8+
main: './src/main.tsx',
9+
},
10+
output: {
11+
path: path.resolve(__dirname, 'dist'),
12+
filename: '[name].[contenthash:8].bundle.js',
13+
chunkFilename: '[name].[contenthash:8].bundle.js',
14+
cssChunkFilename: '[name].[contenthash:8].bundle.js',
15+
},
16+
resolve: {
17+
alias: {
18+
'@config': path.resolve(__dirname, './config'),
19+
'@problems': path.resolve(__dirname, './problems'),
20+
'@src': path.resolve(__dirname, './src'),
21+
},
22+
},
23+
builtins: {
24+
css: {
25+
modules: {
26+
localIdentName: '[path][name]__[local]--[hash:6]',
27+
},
28+
},
29+
},
30+
module: {
31+
rules: [
32+
{
33+
resourceQuery: /url$/,
34+
type: 'asset/resource',
35+
},
36+
{
37+
resourceQuery: /raw$/,
38+
type: 'asset/source',
39+
},
40+
{
41+
test: /\.less$/i,
42+
use: [
43+
{
44+
loader: 'less-loader',
45+
options: {
46+
lessOptions: {
47+
javascriptEnabled: true,
48+
},
49+
},
50+
},
51+
],
52+
type: 'css',
53+
},
54+
{
55+
test: /\.module\.less$/i,
56+
use: [
57+
{
58+
loader: 'less-loader',
59+
options: {
60+
lessOptions: {
61+
javascriptEnabled: true,
62+
},
63+
},
64+
},
65+
],
66+
type: 'css/module',
67+
},
68+
{
69+
test: /\.svg$/,
70+
issuer: /\.[jt]sx?$/,
71+
use: ['@svgr/webpack'],
72+
},
73+
],
74+
},
75+
};
76+
}

0 commit comments

Comments
 (0)