@sugar-templates/react-less 1.1.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/.gitignore +16 -0
  2. package/browser/home/app.less +6 -0
  3. package/browser/home/app.tsx +38 -0
  4. package/browser/home/index.tsx +12 -0
  5. package/package.json +39 -0
  6. package/server/controllers/home.ts +22 -0
  7. package/server/controllers/index.ts +1 -0
  8. package/server/index.ts +34 -0
  9. package/server/render.ts +22 -0
  10. package/sugar.config.ts +61 -0
  11. package/tsconfig.json +24 -0
package/.gitignore ADDED
@@ -0,0 +1,16 @@
1
+ .DS_Store
2
+ .eslintrc
3
+ .idea
4
+
5
+ node_modules
6
+ .vscode
7
+
8
+ .nyc_output
9
+ coverage.lcov
10
+ coverage
11
+ CODECOV_TOKEN
12
+
13
+ *.log
14
+
15
+ .sugar-cache
16
+ build
package/browser/home/app.less ADDED
@@ -0,0 +1,6 @@
1
+ .title {
2
+ font-size: 36px;
3
+ }
4
+ .name {
5
+ font-size: 24px;
6
+ }
package/browser/home/app.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import React, {
2
+ useCallback,
3
+ useState
4
+ } from 'react';
5
+
6
+ import cls from './app.less';
7
+
8
+ const randomNames = [
9
+ '张三',
10
+ '李四',
11
+ '王五'
12
+ ]
13
+
14
+ export const App = () => {
15
+ const [name, setName] = useState(() => {
16
+ return randomNames[Math.floor(randomNames.length * Math.random())]
17
+ })
18
+
19
+ const changeName = useCallback(() => {
20
+ setName(
21
+ randomNames[Math.floor(randomNames.length * Math.random())]
22
+ )
23
+ }, [])
24
+
25
+ return (
26
+ <div>
27
+ <h1
28
+ className={cls.title}
29
+ >welcome</h1>
30
+ <h4
31
+ className={cls.name}
32
+ >{name}</h4>
33
+ <button
34
+ onClick={changeName}
35
+ >点击换个名字</button>
36
+ </div>
37
+ )
38
+ }
package/browser/home/index.tsx ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { createRoot } from 'react-dom/client';
3
+
4
+ import {
5
+ App
6
+ } from './app';
7
+
8
+ createRoot(
9
+ document.getElementById('application')!
10
+ ).render((<App />))
11
+
12
+ export default '';
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@sugar-templates/react-less",
3
+ "version": "1.1.0-beta.8",
4
+ "description": "",
5
+ "main": "server/index.ts",
6
+ "files": [
7
+ "browser",
8
+ "server",
9
+ ".gitignore",
10
+ "sugar.config.ts",
11
+ "tsconfig.json"
12
+ ],
13
+ "publishConfig": {
14
+ "access": "public"
15
+ },
16
+ "author": "",
17
+ "license": "ISC",
18
+ "dependencies": {
19
+ "@types/react": "^18.0.28",
20
+ "@types/react-dom": "^18.0.11",
21
+ "cross-env": "^7.0.3",
22
+ "css-loader": "^6.8.1",
23
+ "less": "^4.2.0",
24
+ "less-loader": "^11.1.3",
25
+ "mini-css-extract-plugin": "^2.7.6",
26
+ "react": "^18.2.0",
27
+ "react-dom": "^18.2.0",
28
+ "sugar-scripts": "1.0.0-beta.9",
29
+ "sugar-server": "^1.0.0-beta.4",
30
+ "sugar-server-utils": "^1.0.0-beta.5",
31
+ "ts-loader": "^9.3.0",
32
+ "typescript": "^4.3.5"
33
+ },
34
+ "scripts": {
35
+ "dev": "sugar-scripts dev",
36
+ "build": "sugar-scripts build",
37
+ "start": "sugar-scripts start"
38
+ }
39
+ }
package/server/controllers/home.ts ADDED
@@ -0,0 +1,22 @@
1
+ import {
2
+ Controller,
3
+ router,
4
+ parameter
5
+ } from 'sugar-server';
6
+ import {
7
+ render
8
+ } from 'sugar-server-utils';
9
+
10
+ import HomePageView from 'sugar?browser-entry/../../browser/home';
11
+
12
+
13
+ export class HomeController extends Controller {
14
+ @router.GetRoute('/')
15
+ @parameter.getter
16
+ @render.register(HomePageView)
17
+ home () {
18
+ return {
19
+ title: 'welcome',
20
+ };
21
+ }
22
+ }
package/server/controllers/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { HomeController } from './home';
package/server/index.ts ADDED
@@ -0,0 +1,34 @@
1
+ import path from 'path';
2
+ import {
3
+ Application
4
+ } from 'sugar-server';
5
+
6
+ import {
7
+ StaticController
8
+ } from 'sugar-server-utils';
9
+
10
+ import * as Controllers from './controllers';
11
+
12
+
13
+ class App extends Application {
14
+ static Controllers = [
15
+ StaticController.createStaticController({
16
+ staticResourcesPath: path.resolve(
17
+ __dirname,
18
+ path.relative(
19
+ process.env.SUGAR_SERVER_DIR || '',
20
+ process.env.SUGAR_BROWSER_DIR || ''
21
+ )
22
+ ),
23
+ prefix: '/static'
24
+ }),
25
+ ...Object.keys(Controllers).map((controllerKey) => (Controllers as any)[controllerKey])
26
+ ]
27
+ }
28
+
29
+ const app = new App();
30
+ app.listen(9000, () => {
31
+ console.log('start server on 9000')
32
+ });
33
+
34
+ // export default Client1App;
package/server/render.ts ADDED
@@ -0,0 +1,22 @@
1
+ import {
2
+ render
3
+ } from 'sugar-server-utils'
4
+
5
+ const htmlRender: render.CustomRender = function (
6
+ data,
7
+ custom
8
+ ) {
9
+ console.log(data);
10
+ return `<!DOCTYPE html>
11
+ <head>
12
+ <title>${custom.title}</title>
13
+ ${data.entriesHTML.main.styleHTML}
14
+ </head>
15
+ <body>
16
+ <div id="application"></div>
17
+ ${data.entriesHTML.main.scriptHTML}
18
+ </body>
19
+ </html>`;
20
+ }
21
+
22
+ export default htmlRender;
package/sugar.config.ts ADDED
@@ -0,0 +1,61 @@
1
+ import {
2
+ SugarScriptsProject
3
+ } from 'sugar-scripts';
4
+ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
5
+
6
+
7
+ export const packageConfig: SugarScriptsProject.PackageConfig = {
8
+ cacheDir: './.sugar-cache',
9
+ browser: {
10
+ output: './build/dist'
11
+ },
12
+ server: {
13
+ output: './build/server',
14
+ entry: './server/index.ts',
15
+ render: './server/render.ts',
16
+ }
17
+ }
18
+
19
+ export const browserWebpackConfig: SugarScriptsProject.BrowserWebpackConfig = (
20
+ webpackChainConfig
21
+ ) => {
22
+ webpackChainConfig.output.publicPath('/static')
23
+
24
+ webpackChainConfig
25
+ .plugin('MiniCssExtractPlugin')
26
+ .use(
27
+ MiniCssExtractPlugin,
28
+ [{
29
+ filename: webpackChainConfig.get('mode') === 'development'
30
+ ? '[name].css'
31
+ : '[name].[contenthash].css'
32
+ }]
33
+ )
34
+ .end();
35
+
36
+ webpackChainConfig.module.rule('moduleCSS')
37
+ .test(/^(?!(.*?extract|.*?\.global)).*?\.(css|less)/)
38
+ .exclude
39
+ .add(/node_modules/)
40
+ .end()
41
+ .use('extract-loader')
42
+ .loader(MiniCssExtractPlugin.loader)
43
+ .options({
44
+ esModule: true,
45
+ })
46
+ .end()
47
+ .use('css-loader')
48
+ .loader('css-loader')
49
+ .options({
50
+ modules: {
51
+ localIdentName:
52
+ process.env.NODE_ENV === 'development'
53
+ ? '[path][name]__[local]--[hash:base64]'
54
+ : '[hash:base64]',
55
+ }
56
+ })
57
+ .end()
58
+ .use('less-loader')
59
+ .loader('less-loader')
60
+ .end();
61
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es6",
4
+ "module": "CommonJS",
5
+ "strict": true,
6
+ "allowJs": false,
7
+ "declaration": true,
8
+ "jsx": "react",
9
+ "esModuleInterop": true,
10
+ "moduleResolution": "node",
11
+ "experimentalDecorators": true,
12
+ "emitDecoratorMetadata": true,
13
+ "allowSyntheticDefaultImports": true,
14
+ "resolveJsonModule": true,
15
+ "lib": [
16
+ "ESNext",
17
+ "DOM"
18
+ ],
19
+ "skipLibCheck": true,
20
+ "sourceMap": true,
21
+ "baseUrl": ".",
22
+ "rootDir": "."
23
+ }
24
+ }