mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-05 19:22:07 +00:00
Initial commit
This commit is contained in:
Pandipipas
+136
@@ -0,0 +1,136 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# NodeCG built files
|
||||||
|
/dashboard/
|
||||||
|
/extension/
|
||||||
|
/graphics/
|
||||||
|
/shared/dist/
|
||||||
Vendored
+7
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"syler.sass-indented",
|
||||||
|
"Vue.volar",
|
||||||
|
]
|
||||||
|
}
|
||||||
Vendored
+13
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"explorer.fileNesting.enabled": true,
|
||||||
|
"explorer.fileNesting.expand": false,
|
||||||
|
"explorer.fileNesting.patterns": {
|
||||||
|
"eslint.config.js": "eslint.*.js",
|
||||||
|
},
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"files.eol": "\n",
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.organizeImports": "explicit"
|
||||||
|
},
|
||||||
|
"typescript.tsdk": "node_modules\\typescript\\lib",
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2025 zoton2
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
# nodecg-vue-ts-template
|
||||||
|
|
||||||
|
Template for NodeCG bundles that use Vue.js and TypeScript.
|
||||||
|
|
||||||
|
|
||||||
|
## Technical Details
|
||||||
|
|
||||||
|
- Tested with Node.js v22.11.0 and above (as of writing, latest LTS properly tested and supported with NodeCG).
|
||||||
|
- Extension uses TypeScript.
|
||||||
|
- Browser uses Vue.js (v3), with TypeScript for the scripting.
|
||||||
|
- Includes the [nodecg-vue-composable](https://github.com/Dan-Shields/nodecg-vue-composable) helper composable to help with using replicants; I advise you check it's README for more information.
|
||||||
|
- Dashboard also includes Quasar, for easy styling of UI.
|
||||||
|
- If you wish to configure Quasar differently, check [the quasar vite-plugin documentation](https://quasar.dev/start/vite-plugin#using-quasar).
|
||||||
|
- Builds using Vite, using the [vite-plugin-nodecg](https://github.com/nodecg/vite-plugin-nodecg) plugin.
|
||||||
|
- The bundle also overrides `vite` to v6 (dependency asks for v5) as it is tested working.
|
||||||
|
- ESLint is included for extension/browser/typings.
|
||||||
|
- Extends some other recommended configurations.
|
||||||
|
- I personally use Visual Studio Code with some appropriate extensions so have made sure it works well in that editor.
|
||||||
|
- Includes a `.vscode/extensions.json` that will suggest you appropriate extensions.
|
||||||
|
- Includes a `.vscode/settings.json` that has some settings that you may find useful.
|
||||||
|
- The extension/browser files have some example code scattered about that should help in how to use things.
|
||||||
|
|
||||||
|
## Limitations
|
||||||
|
|
||||||
|
- I don't use any JSON schema specs higher than `draft-07` due to Visual Studio Code not supporting them correctly; see [this issue](https://github.com/microsoft/vscode/issues/98724).
|
||||||
|
|
||||||
|
## Package Commands
|
||||||
|
|
||||||
|
- `autofix`: Automatically fix any possible linting errors using ESLint.
|
||||||
|
- `prebuild`: Clean up all built/watched files; will automatically run before `build` if called.
|
||||||
|
- `build`: Build written code for use in production.
|
||||||
|
- `clean`: Clean up all built/watched files.
|
||||||
|
- `lint`: Finds any possible linting errors using ESLint, but does not fix them.
|
||||||
|
- `schema-types`: Create TypeScript typings for schemas/`Configschema.json` using `nodecg` CLI.
|
||||||
|
- `start`: Start NodeCG.
|
||||||
|
- `watch`: Build code and watch for changes, for use in development.
|
||||||
|
|
||||||
|
## Changelogs
|
||||||
|
|
||||||
|
All changes onwards from v3.0.0 are available on the [releases](../../releases) section. Other changelogs are available below.
|
||||||
|
|
||||||
|
### Differences between template v2 and v3...
|
||||||
|
|
||||||
|
This is a "brief" list of changes, although in relality it was mostly rewritten from the ground up, so there are probably more.
|
||||||
|
|
||||||
|
If you want to see all of the changes, check out the [original PR](https://github.com/zoton2/nodecg-vue-ts-template/pull/24).
|
||||||
|
|
||||||
|
- Switched Vite config file to TypeScript (`vite.config.mjs` > `vite.config.ts`).
|
||||||
|
- Updated how the extension code is built and how it is run in a Node.js context:
|
||||||
|
- It now runs using the `module` type.
|
||||||
|
- It is built targetting more modern standards (based on `@tsconfig/node22`).
|
||||||
|
- All updates needed for NodeCG v2, which isn't too many but is still some (mainly type related).
|
||||||
|
- Bumped `package.json`s `nodecg.compatibleRange` to `^2.3.0`, as that's the first NodeCG version that properly supported Node.js v22.11.0 LTS.
|
||||||
|
- Use NodeCG types from official dependency.
|
||||||
|
- Replaced [@vueuse/head](https://github.com/vueuse/head) with [@unhead/vue](https://github.com/unjs/unhead), due to the former's sunsetting.
|
||||||
|
- ESLint overhaul:
|
||||||
|
- Upgraded from ESLint v9 from v8.
|
||||||
|
- Switched to using flat configs.
|
||||||
|
- A lot was stripped out that I don't think was needed (feel free to report any issues you may have).
|
||||||
|
- No longer extends the configuration from airbnb-typescript, as it isn't available for ESLint v9 yet, and I wanted to try without it.
|
||||||
|
- Reduced the amount of `package.json` scripts/commands by combining some of them and removing the extension/browser/etc. splits.
|
||||||
|
- Added a `./src/browser_shared` folder with a shared `replicant.ts` helper file for browser contexts.
|
||||||
|
- Removed MDI CSS being imported by default on dashboard panels.
|
||||||
|
- Removed the `module-alias` parts as I felt they may have made things too confusing.
|
||||||
|
- Moved browser `*.ts` entry files into the the respective sub-directories for better organisation.
|
||||||
|
|
||||||
|
### Differences between template v1 and v2...
|
||||||
|
|
||||||
|
- Upgraded Vue to v3 from v2.
|
||||||
|
- Uses Vite to build browser code instead of Webpack.
|
||||||
|
- Uses Quasar for material design styling help instead of Vuetify.
|
||||||
|
- No TypeScript decorators used in the browser code now as they aren't needed.
|
||||||
|
- Adds [nodecg-vue-composable](https://github.com/Dan-Shields/nodecg-vue-composable) to help with using/modifying replicants in browser.
|
||||||
|
- No longer includes any Vue state plugins by default (as no longer needed for replicants), but you can add one if needed (I'd suggest [pinia](https://pinia.vuejs.org/)).
|
||||||
|
- Includes [@vueuse/head](https://github.com/vueuse/head), in the example code just used to help change the title of each page.
|
||||||
|
- Uses the [nodecg-types](https://github.com/codeoverflow-org/nodecg-types) package instead of directly referencing the installed NodeCG instance.
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||||
|
"type": "object",
|
||||||
|
"additionalProperties": false,
|
||||||
|
"properties": {
|
||||||
|
"exampleProperty": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": [
|
||||||
|
"exampleProperty"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
// @ts-check
|
||||||
|
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
|
||||||
|
import pluginVue from 'eslint-plugin-vue';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
/* Rules used for anything browser related (dashboard and graphics). */
|
||||||
|
export default tseslint.config({
|
||||||
|
extends: defineConfigWithVueTs(
|
||||||
|
pluginVue.configs['flat/recommended'],
|
||||||
|
vueTsConfigs.recommended,
|
||||||
|
),
|
||||||
|
rules: {
|
||||||
|
// Allows "main.vue" files to be named as such.
|
||||||
|
'vue/multi-word-component-names': ['error', { ignores: ['main'] }],
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
'src/browser_shared/**/*.ts',
|
||||||
|
'src/browser_shared/**/*.vue',
|
||||||
|
'src/dashboard/**/*.ts',
|
||||||
|
'src/dashboard/**/*.vue',
|
||||||
|
'src/graphics/**/*.ts',
|
||||||
|
'src/graphics/**/*.vue',
|
||||||
|
],
|
||||||
|
});
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// @ts-check
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
import browser from './eslint.browser.js';
|
||||||
|
import extension from './eslint.extension.js';
|
||||||
|
|
||||||
|
/* Exists so anything looking for an ESLint config file (including VSCode and the `eslint` command) can find the rules. */
|
||||||
|
export default tseslint.config([
|
||||||
|
{
|
||||||
|
ignores: [
|
||||||
|
// Ignore built files.
|
||||||
|
'dashboard/**/*',
|
||||||
|
'extension/**/*',
|
||||||
|
'graphics/**/*',
|
||||||
|
'shared/dist/**/*',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
browser,
|
||||||
|
extension,
|
||||||
|
]);
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// @ts-check
|
||||||
|
import eslint from '@eslint/js';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
/* Rules used for anything extension related (including types). */
|
||||||
|
export default tseslint.config({
|
||||||
|
extends: [
|
||||||
|
eslint.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
],
|
||||||
|
files: [
|
||||||
|
'src/extension/**/*.ts',
|
||||||
|
'src/types/**/*.d.ts',
|
||||||
|
],
|
||||||
|
ignores: [
|
||||||
|
'src/types/schemas/**/*.d.ts',
|
||||||
|
'src/types/env.d.ts',
|
||||||
|
],
|
||||||
|
});
|
||||||
Generated
+12205
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,79 @@
|
|||||||
|
{
|
||||||
|
"name": "nodecg-vue-ts-template",
|
||||||
|
"version": "3.0.0",
|
||||||
|
"description": "Template for NodeCG bundles that use Vue.js and TypeScript.",
|
||||||
|
"homepage": "https://github.com/zoton2/nodecg-vue-ts-template#readme",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/zoton2/nodecg-vue-ts-template/issues"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/zoton2/nodecg-vue-ts-template.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"author": "zoton2",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"autofix": "eslint --fix",
|
||||||
|
"prebuild": "trash ./extension && trash ./node_modules/.vite && trash ./shared/dist && trash ./dashboard && trash ./graphics",
|
||||||
|
"build": "vite build && tsc -b tsconfig.extension.json",
|
||||||
|
"lint": "eslint",
|
||||||
|
"schema-types": "nodecg schema-types",
|
||||||
|
"start": "cd ../.. && node index.js",
|
||||||
|
"watch": "conc -n B,E -c red,blue -k vite \"tsc -b -w --preserveWatchOutput tsconfig.extension.json\""
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.0",
|
||||||
|
"@quasar/extras": "^1.17.0",
|
||||||
|
"@quasar/vite-plugin": "^1.10.0",
|
||||||
|
"@tsconfig/node22": "^22.0.2",
|
||||||
|
"@types/node": "^22.18.13",
|
||||||
|
"@unhead/vue": "^2.0.19",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"@vue/eslint-config-typescript": "^14.6.0",
|
||||||
|
"@vue/tsconfig": "^0.8.1",
|
||||||
|
"concurrently": "^9.2.1",
|
||||||
|
"eslint": "^9.39.0",
|
||||||
|
"eslint-plugin-vue": "^10.5.1",
|
||||||
|
"nodecg": "^2.6.1",
|
||||||
|
"nodecg-vue-composable": "^1.1.0",
|
||||||
|
"quasar": "^2.18.5",
|
||||||
|
"sass-embedded": "^1.93.3",
|
||||||
|
"trash-cli": "^7.0.0",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.2",
|
||||||
|
"vite": "^7.1.12",
|
||||||
|
"vite-plugin-checker": "^0.11.0",
|
||||||
|
"vite-plugin-nodecg": "^2.1.0",
|
||||||
|
"vue": "^3.5.22",
|
||||||
|
"vue-tsc": "^3.1.2"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"overrides": {
|
||||||
|
"vite-plugin-nodecg>vite": "$vite"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nodecg": {
|
||||||
|
"compatibleRange": "^2.3.0",
|
||||||
|
"dashboardPanels": [
|
||||||
|
{
|
||||||
|
"name": "example",
|
||||||
|
"title": "Example",
|
||||||
|
"file": "example/main.html",
|
||||||
|
"width": 3
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"graphics": [
|
||||||
|
{
|
||||||
|
"file": "example/main.html",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"vite-plugin-nodecg": {
|
||||||
|
"vite": "$vite"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||||
|
"type": "object",
|
||||||
|
"additionalProperties": false,
|
||||||
|
"properties": {
|
||||||
|
"exampleProperty": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "exampleString"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": [
|
||||||
|
"exampleProperty"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { useReplicant } from 'nodecg-vue-composable';
|
||||||
|
import type { Schemas } from '../types';
|
||||||
|
|
||||||
|
// YOU MUST CHANGE THIS TO YOUR BUNDLE'S NAME!
|
||||||
|
const thisBundle = 'nodecg-vue-ts-template';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is where you can declare all of your replicants to import easily into other (browser based) files.
|
||||||
|
* "useReplicant" is a helper composable to make accessing/modifying replicants easier.
|
||||||
|
* For more information see https://github.com/Dan-Shields/nodecg-vue-composable
|
||||||
|
*/
|
||||||
|
export const exampleReplicant = useReplicant<Schemas.ExampleReplicant>('exampleReplicant', thisBundle);
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
import '@quasar/extras/material-icons/material-icons.css';
|
||||||
|
import '@quasar/extras/roboto-font/roboto-font.css';
|
||||||
|
import { createHead } from '@unhead/vue/client';
|
||||||
|
import { Dark, Quasar } from 'quasar';
|
||||||
|
import 'quasar/src/css/index.sass';
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './main.vue';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
const head = createHead();
|
||||||
|
app.use(Quasar);
|
||||||
|
app.use(head);
|
||||||
|
app.mount('#app');
|
||||||
|
Dark.set(true);
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useHead } from '@unhead/vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { exampleReplicant } from '../../browser_shared/replicants';
|
||||||
|
import type { ExampleType } from '../../types';
|
||||||
|
|
||||||
|
useHead({ title: 'example' }); // set the title of this page
|
||||||
|
const text = ref('Example');
|
||||||
|
|
||||||
|
// Example code: accessing normal types.
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const exampleType: ExampleType = { exampleProperty: 'exampleString' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{ text }}
|
||||||
|
<br><br>
|
||||||
|
<img
|
||||||
|
src="./image.png"
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
>
|
||||||
|
<br><br>
|
||||||
|
<QBtn
|
||||||
|
color="primary"
|
||||||
|
label="Example"
|
||||||
|
/>
|
||||||
|
<br><br>
|
||||||
|
<!-- Example code: accessing a replicant. -->
|
||||||
|
{{ exampleReplicant?.data?.exampleProperty }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
$primary : #00BEBE // NodeCG primary colour
|
||||||
|
$secondary : #26A69A
|
||||||
|
$accent : #9C27B0
|
||||||
|
|
||||||
|
$dark : #1D1D1D
|
||||||
|
$dark-page : #121212
|
||||||
|
|
||||||
|
$positive : #21BA45
|
||||||
|
$negative : #C10015
|
||||||
|
$info : #31CCEC
|
||||||
|
$warning : #F2C037
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #2F3A4F !important; /* force body background to original NodeCG colour */
|
||||||
|
margin: 15px !important; /* force body to have original NodeCG padding */
|
||||||
|
width: unset !important; /* unset quasar width */
|
||||||
|
min-width: unset !important; /* unset quasar min-width */
|
||||||
|
font-size: unset !important; /* unset quasar font-size */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import type { ExampleType } from '../types/index.js';
|
||||||
|
import { nodecg } from './util/nodecg.js';
|
||||||
|
import { exampleReplicant } from './util/replicants.js';
|
||||||
|
|
||||||
|
// Example code:
|
||||||
|
// Log to show things are working.
|
||||||
|
nodecg.log.info('Extension code working!');
|
||||||
|
// Access this bundle's configuration with no type assertion needed.
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const configProperty = nodecg.bundleConfig.exampleProperty;
|
||||||
|
// Access/set a replicant (also see ./util/replicants).
|
||||||
|
exampleReplicant.value = { exampleProperty: `exampleString_Changed_${Date.now()}` };
|
||||||
|
// Accessing normal types.
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const exampleType: ExampleType = { exampleProperty: 'exampleString' };
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import type { NodeCGServerAPI } from '../types/index.js';
|
||||||
|
import { set } from './util/nodecg.js';
|
||||||
|
|
||||||
|
export default async (nodecg: NodeCGServerAPI) => {
|
||||||
|
/**
|
||||||
|
* Because of how top-level `import`s work, it helps to use `import`s here
|
||||||
|
* to force things to be loaded *after* the NodeCG context is set.
|
||||||
|
*/
|
||||||
|
set(nodecg); // set nodecg "context" before anything else
|
||||||
|
await import('./util/replicants.js'); // make sure replicants are set up
|
||||||
|
await import('./example.js');
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import type { NodeCGServerAPI } from '../../types/index.js';
|
||||||
|
|
||||||
|
export let nodecg!: NodeCGServerAPI;
|
||||||
|
|
||||||
|
export function set(ctx: NodeCGServerAPI) {
|
||||||
|
nodecg = ctx;
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import type NodeCG from 'nodecg/types';
|
||||||
|
import type { Schemas } from '../../types/index.js';
|
||||||
|
import { nodecg } from './nodecg.js';
|
||||||
|
|
||||||
|
// Wrapper for replicants that have a default (based on schema).
|
||||||
|
function hasDefault<T>(name: string) {
|
||||||
|
return nodecg.Replicant<T>(name) as unknown as NodeCG.default.ServerReplicantWithSchemaDefault<T>;
|
||||||
|
}
|
||||||
|
// Wrapper for replicants that don't have a default (based on schema).
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
function hasNoDefault<T>(name: string) {
|
||||||
|
return nodecg.Replicant<T>(name) as NodeCG.default.ServerReplicant<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is where you can declare all of your replicants to import easily into other files,
|
||||||
|
* and to make sure they have any correct settings on startup.
|
||||||
|
*/
|
||||||
|
export const exampleReplicant = hasDefault<Schemas.ExampleReplicant>('exampleReplicant');
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,8 @@
|
|||||||
|
import { createHead } from '@unhead/vue/client';
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './main.vue';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
const head = createHead();
|
||||||
|
app.use(head);
|
||||||
|
app.mount('#app');
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useHead } from '@unhead/vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { exampleReplicant } from '../../browser_shared/replicants';
|
||||||
|
import type { ExampleType } from '../../types';
|
||||||
|
|
||||||
|
useHead({ title: 'example' }); // set the title of this page
|
||||||
|
const text = ref('Example');
|
||||||
|
|
||||||
|
// Example code: accessing normal types.
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const exampleType: ExampleType = { exampleProperty: 'exampleString' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{ text }}
|
||||||
|
<br><br>
|
||||||
|
<img src="./image.png">
|
||||||
|
<br><br>
|
||||||
|
<!-- Example code: accessing a replicant. -->
|
||||||
|
{{ exampleReplicant?.data?.exampleProperty }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
export interface ExampleType {
|
||||||
|
exampleProperty: string;
|
||||||
|
}
|
||||||
Vendored
+12
@@ -0,0 +1,12 @@
|
|||||||
|
/**
|
||||||
|
* This is a modified version of the augment-window.d.ts file included in
|
||||||
|
* the NodeCG types, but allows us to automatically receive the configuration types.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { NodeCGAPIClient } from '../../node_modules/nodecg/out/client/api/api.client.d.ts';
|
||||||
|
import type { Configschema } from './schemas/configschema.d.ts';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
let NodeCG: typeof NodeCGAPIClient;
|
||||||
|
let nodecg: NodeCGAPIClient<Configschema>;
|
||||||
|
}
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
import type NodeCG from 'nodecg/types';
|
||||||
|
import type { Configschema } from './schemas.d.ts';
|
||||||
|
|
||||||
|
export type NodeCGServerAPI = NodeCG.default.ServerAPI<Configschema>;
|
||||||
|
export type { ExampleType } from './ExampleType.d.ts';
|
||||||
|
export type * as Schemas from './schemas.d.ts';
|
||||||
Vendored
+8
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* This is a file where the schema types can be re-exported properly.
|
||||||
|
* This is for convenience; nothing is different if referenced from their files directly.
|
||||||
|
* Also see index.d.ts for a "grouped" re-export of this as well.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type { Configschema } from './schemas/configschema.d.ts';
|
||||||
|
export type { ExampleReplicant } from './schemas/exampleReplicant.d.ts';
|
||||||
Vendored
+11
@@ -0,0 +1,11 @@
|
|||||||
|
/* prettier-ignore */
|
||||||
|
/* eslint-disable */
|
||||||
|
/**
|
||||||
|
* This file was automatically generated by json-schema-to-typescript.
|
||||||
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
||||||
|
* and run json-schema-to-typescript to regenerate this file.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface Configschema {
|
||||||
|
exampleProperty: string;
|
||||||
|
}
|
||||||
+11
@@ -0,0 +1,11 @@
|
|||||||
|
/* prettier-ignore */
|
||||||
|
/* eslint-disable */
|
||||||
|
/**
|
||||||
|
* This file was automatically generated by json-schema-to-typescript.
|
||||||
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
||||||
|
* and run json-schema-to-typescript to regenerate this file.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface ExampleReplicant {
|
||||||
|
exampleProperty: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
/* Settings here partially mimick those included in a generated Vue project (npm create vue). */
|
||||||
|
/* Settings used for anything browser related (dashboard and graphics). */
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.browser.tsbuildinfo",
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./src/browser_shared/**/*.ts",
|
||||||
|
"./src/browser_shared/**/*.vue",
|
||||||
|
"./src/dashboard/**/*.ts",
|
||||||
|
"./src/dashboard/**/*.vue",
|
||||||
|
"./src/graphics/**/*.ts",
|
||||||
|
"./src/graphics/**/*.vue",
|
||||||
|
"./src/types/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
/* Settings used for anything extension related. */
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.extension.tsbuildinfo",
|
||||||
|
"rootDir": "./src/extension",
|
||||||
|
"outDir": "./extension",
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./src/extension/**/*.ts",
|
||||||
|
"./src/types/**/*.d.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"./src/types/augment-window.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
/* Exists so anything looking for a tsconfig file (including VSCode) can find the settings. */
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.browser.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.extension.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.vite.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
/* Settings here mimick those included in a generated Vue project (npm create vue). */
|
||||||
|
/* They are only used for the vite.config.ts file. */
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vite.tsbuildinfo",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./vite.config.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import checker from 'vite-plugin-checker';
|
||||||
|
import NodeCGPlugin from 'vite-plugin-nodecg';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue({ template: { transformAssetUrls } }),
|
||||||
|
quasar({
|
||||||
|
autoImportComponentCase: 'pascal',
|
||||||
|
sassVariables: fileURLToPath(
|
||||||
|
new URL('./src/dashboard/quasar-variables.sass', import.meta.url)
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
checker({ vueTsc: { tsconfigPath: 'tsconfig.browser.json' } }),
|
||||||
|
NodeCGPlugin({
|
||||||
|
inputs: {
|
||||||
|
'graphics/*/main.ts': './src/graphics/template.html',
|
||||||
|
'dashboard/*/main.ts': './src/dashboard/template.html',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user