first

.gitignore

@@ -0,0 +1,20 @@
+.DS_Store
+node_modules
+coverage
+temp
+explorations
+TODOs.md
+*.log
+.idea
+dist
+/content/**/*.xml
+/content/**/*.js
+!/content/**/custom_loading_screen.js
+!/content/**/panorama-polyfill.js
+/content/**/*.css
+!/content/vue_example/panorama/layout/custom_game/custom_ui_manifest.xml
+*.vjs_c
+*.vcss_c
+*.vxml_c
+*.bin
+panorama_debugger.cfg

.prettierignore

@@ -0,0 +1,6 @@
+build
+coverage
+**/dist
+**/vue_example
+.github
+package.json

.prettierrc

@@ -0,0 +1,7 @@
+semi: true
+singleQuote: true
+printWidth: 80
+trailingComma: 'none'
+arrowParens: 'avoid'
+tabWidth: 4
+endOfLine: 'lf'

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.exclude": {
+        "**/node_modules": true
+    }
+}

babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    targets: 'node 8.2',
+    comments: false,
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
+        [
+            'babel-preset-solid',
+            {
+                moduleName: '@solid-panorama/runtime',
+                generate: 'universal'
+            }
+        ]
+    ],
+    plugins: ['@babel/plugin-transform-typescript']
+};

build-rollup-config.ts

@@ -0,0 +1,78 @@
+import rollupTypescript, {
+    RollupTypescriptOptions
+} from '@rollup/plugin-typescript';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import path, { join } from 'node:path';
+import babel from '@rollup/plugin-babel';
+import { RollupWatchOptions } from 'rollup';
+import chalk from 'chalk';
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import alias from '@rollup/plugin-alias';
+import replace from '@rollup/plugin-replace';
+
+const cli_prefix = `[${chalk.magenta('Panorama')}]`;
+
+function isDir(p: string) {
+    return statSync(p).isDirectory();
+}
+
+export default function GetRollupWatchOptions(rootPath: string) {
+    // 入口文件夹
+    const Dirs = readdirSync(rootPath).filter(
+        v =>
+            isDir(path.join(rootPath, v)) &&
+            v !== 'global' &&
+            existsSync(path.join(rootPath, `${v}/${v}.ts`))
+    );
+    console.log(Dirs.map(v => cli_prefix + ' 👁️  ' + v).join('\n'));
+
+    const options: RollupWatchOptions = {
+        input: path.join(rootPath, `./app.tsx`),
+        output: {
+            sourcemap: false,
+            dir: 'dist',
+            format: 'cjs',
+            entryFileNames: `[name].js`,
+            chunkFileNames: `[name].js`,
+            assetFileNames: `[name].[ext]`,
+            manualChunks(id, api) {
+                // const u = new URL(id, 'file:');
+                if (id.search(/[\\/]common[\\/]/) >= 0) {
+                    return 'common';
+                }
+                if (id.search(/[\\/]node_modules[\\/]/) >= 0) {
+                    return 'common';
+                }
+            }
+        },
+        plugins: [
+            babel({
+                comments: false,
+                exclude: 'node_modules/**',
+                extensions: ['.js', '.ts', '.tsx'],
+                babelHelpers: 'bundled'
+            }),
+            alias({
+                entries: [
+                    {
+                        find: '@common/(.*)',
+                        replacement: join(__dirname, 'pages/common/$1.ts')
+                    }
+                ]
+            }),
+            replace({
+                preventAssignment: true,
+                'process.env.NODE_ENV': JSON.stringify('production')
+                // 'process.env.NODE_ENV': JSON.stringify('development'),
+            }),
+            // rollupTypescript({
+            //     tsconfig: path.join(rootPath, `tsconfig.json`)
+            // }),
+            commonjs(),
+            nodeResolve()
+        ]
+    };
+
+    return options;
+}

build-write-file.ts

@@ -0,0 +1,25 @@
+import fs, { promises } from 'fs';
+
+const w = promises.writeFile;
+const r = promises.readFile;
+// @ts-ignore
+const ww: typeof w = async function (file, data, options): Promise<void> {
+    try {
+        const content = await r(file, options);
+        if (typeof content === 'string') {
+            if (content === data) {
+                return;
+            }
+        } else if (Buffer.isBuffer(content)) {
+            if (
+                content.equals(
+                    Buffer.isBuffer(data) ? data : Buffer.from(data as string)
+                )
+            ) {
+                return;
+            }
+        }
+    } catch (err) {}
+    await w(file, data, options);
+};
+promises.writeFile = ww;

build.ts

@@ -0,0 +1,118 @@
+import chokidar from 'chokidar';
+import {
+    readdirSync,
+    readFileSync,
+    statSync,
+    existsSync,
+    Stats,
+    writeFileSync
+} from 'fs';
+import * as rollup from 'rollup';
+import path from 'path';
+import chalk from 'chalk';
+import {
+    PreloadTemplates,
+    RenderPanoramaXML,
+    RenderPanoramaXMLOptions
+} from 'dota2-panorama-xml-static-element';
+import glob from 'glob';
+import { readFile } from 'fs/promises';
+import GetRollupWatchOptions from './build-rollup-config';
+
+const cli_prefix = `[${chalk.magenta('Panorama')}]`;
+const rootPath = path_step(path.join(__dirname, 'src'));
+
+function path_step(p: string) {
+    return p.replace(/\\/g, '/');
+}
+
+function file_color(s: string) {
+    return chalk.green(s);
+}
+
+function isDir(p: string) {
+    return statSync(p).isDirectory();
+}
+
+/**
+ * 启动Rollup编译
+ */
+function StartRollup(): void {
+    let options: rollup.RollupWatchOptions = GetRollupWatchOptions(rootPath);
+    let watcher = rollup.watch(options);
+
+    // 监听错误
+    watcher.on('event', async evt => {
+        if (evt.code === 'ERROR') {
+            const f = path_step(evt.error.loc?.file || '').replace(
+                rootPath + '/',
+                ''
+            );
+            console.log(
+                cli_prefix +
+                    ' Build Error: ' +
+                    chalk.red(f) +
+                    ': ' +
+                    chalk.yellow(evt.error.loc?.line)
+            );
+            console.log(
+                cli_prefix + ' Build Error: ' + chalk.red(evt.error.message)
+            );
+        }
+    });
+
+    watcher.on('change', p => {
+        console.log(cli_prefix + ' ✒️  ' + file_color(path.basename(p)));
+    });
+}
+
+/**
+ * 复制XML
+ */
+async function onXMLChange(filePath: string, stats?: Stats | undefined) {
+    let dir = path.dirname(filePath);
+    while (path.basename(path.join(dir, '..')) !== 'pages') {
+        dir = path.join(dir, '..');
+    }
+    let dirName = path.basename(dir);
+    const fileName = path.basename(filePath).replace('.xml', '');
+    console.log(
+        cli_prefix +
+            ' 🐤 ' +
+            file_color(`${fileName}.xml`) +
+            ' >> ' +
+            chalk.blue(dirName + '.xml')
+    );
+    const triggerFile = path.join(dir, `${dirName}.xml`);
+
+    let content = await RenderPanoramaXML(triggerFile, {
+        indentation: ' ',
+        templateRoots: [path.join(rootPath, 'Components'), dir],
+        snippetsFiles: glob.sync(
+            path
+                .join(rootPath, 'Components/Snippets/**/*.xml')
+                .replace(/\\/g, '/')
+        )
+    });
+    writeFileSync(
+        `./content/vue_example/panorama/layout/custom_game/${dirName}.xml`,
+        content
+    );
+}
+
+/**
+ * 任务入口
+ */
+export default async function TaskPUI() {
+    StartRollup();
+    // 监听XML
+    // const xmlFiles = glob.sync(path.join(rootPath, '**/*.xml'));
+    // const watchXML = chokidar.watch(
+    //     [...xmlFiles, path.join(rootPath, '**/*.xml')],
+    //     { ignoreInitial: false }
+    // );
+    // watchXML.on('change', onXMLChange);
+    // watchXML.on('add', onXMLChange);
+}
+
+TaskPUI();

package.json

@@ -0,0 +1,43 @@
+{
+    "name": "solid-panorama-example",
+    "version": "0.0.1",
+    "description": "Solid.js example in Dota2 Panorama",
+    "main": "index.js",
+    "author": "RobinCode",
+    "license": "MIT",
+    "scripts": {
+        "start": "ts-node -r ./build-write-file.ts build.ts",
+        "build": "rollup -c"
+    },
+    "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@babel/plugin-transform-typescript": "^7.20.0",
+        "@babel/preset-env": "^7.19.4",
+        "@babel/preset-typescript": "^7.18.6",
+        "@moddota/panorama-types": "^1.21.0",
+        "@rollup/plugin-alias": "^4.0.2",
+        "@rollup/plugin-babel": "^6.0.2",
+        "@rollup/plugin-commonjs": "^23.0.2",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-replace": "^5.0.1",
+        "@rollup/plugin-typescript": "^9.0.2",
+        "@rollup/plugin-url": "^8.0.1",
+        "@solid-panorama/runtime": "^0.1.1",
+        "@types/babel__core": "^7.1.19",
+        "@types/fs-extra": "^9.0.13",
+        "@types/glob": "^8.0.0",
+        "@types/node": "^18.11.7",
+        "babel-preset-solid": "^1.6.1",
+        "chalk": "4.1.2",
+        "chokidar": "^3.5.3",
+        "dota2-panorama-xml-static-element": "^0.0.4",
+        "fs-extra": "^10.1.0",
+        "glob": "^8.0.3",
+        "npm-run-all": "^4.1.5",
+        "rollup": "^3.2.3",
+        "sass": "^1.55.0",
+        "solid-js": "^1.6.1",
+        "ts-node": "^10.9.1",
+        "typescript": "~4.8.4"
+    }
+}

src/app.tsx

@@ -0,0 +1,20 @@
+import { render } from '@solid-panorama/runtime';
+
+function Item(props: { show: boolean }) {
+    return (
+        <Panel>
+            <Label />
+        </Panel>
+    );
+}
+
+function HelloWorld() {
+    return (
+        <div>
+            Hello World!
+            <Item show />
+        </div>
+    );
+}
+
+render(() => <HelloWorld />, $('#app'));

src/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "include": ["**/*.ts", "**/*.tsx"],
+    "compilerOptions": {
+        "rootDir": ".",
+        "sourceMap": false,
+        "noImplicitAny": true,
+        "experimentalDecorators": true,
+        "allowJs": true,
+        "removeComments": true,
+        "inlineSourceMap": true,
+        "moduleResolution": "Node",
+        "esModuleInterop": true,
+        "strict": true,
+        "target": "ES2017",
+        "types": ["@moddota/panorama-types"],
+        "lib": ["ES2017"],
+        "jsx": "preserve",
+        "jsxImportSource": "solid-js",
+        "paths": {
+            "@common/*": ["./common/*"]
+        }
+    }
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "include": ["./*.ts"],
+    "compilerOptions": {
+        "rootDir": ".",
+        "noImplicitAny": true,
+        "experimentalDecorators": true,
+        "allowJs": true,
+        "inlineSourceMap": true,
+        "moduleResolution": "Node",
+        "esModuleInterop": true,
+        "strict": true,
+        "target": "ESNext",
+        "lib": ["ESNext"]
+    }
+}