Initial commit

2026-06-06 03:32:06 +00:00 · 2026-02-07 14:43:43 +01:00
commit 6955d2588f
37 changed files with 12950 additions and 0 deletions
@@ -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);
@@ -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');
@@ -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>
@@ -0,0 +1,3 @@
+export interface ExampleType {
+  exampleProperty: string;
+}
@@ -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>;
+}
@@ -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';
@@ -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';
@@ -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;
+}
@@ -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;
+}