@stripchatdev/create-stripchat-extension 0.1.7

package/templates/src/slots/slot/app.tsx.ejs

@@ -0,0 +1,22 @@
+import { createExtHelper } from '@stripchatdev/ext-helper';
+import { useEffect, useState } from 'preact/hooks';
+
+const extHelper = createExtHelper();
+
+export const App = () => {
+  const [status, setStatus] = useState('Loading...');
+
+  useEffect(() => {
+    extHelper.makeRequest('v1.ext.context.get', null).then((ctx) => {
+      const name = ctx.model?.username ?? 'unknown';
+      setStatus(`Connected to ${name}'s room`);
+    });
+  }, []);
+
+  return (
+    <div style={{ padding: '16px' }}>
+      <h2><%= slot %></h2>
+      <p>{status}</p>
+    </div>
+  );
+};

package/templates/src/slots/slot/main.css.ejs

@@ -0,0 +1,30 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html[data-theme='dark'] {
+  --bg-primary: #000000;
+  --text-primary: rgba(248, 248, 248, 0.8);
+}
+
+html[data-theme='light'] {
+  --bg-primary: #f5f5f5;
+  --text-primary: rgba(26, 26, 26, 0.8);
+}
+
+html {
+  height: 100%;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  min-height: 100%;
+}
+
+#app {
+  min-height: 100%;
+}

package/templates/src/slots/slot/main.ts.ejs

@@ -0,0 +1,3 @@
+import { init } from './app';
+
+init();

package/templates/src/slots/slot/main.tsx.ejs

@@ -0,0 +1,9 @@
+import { render } from 'preact';
+
+import { App } from './app';
+
+const root = document.getElementById('app');
+
+if (root) {
+  render(<App />, root);
+}

package/templates/src/slots/slot/slot.html.ejs

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>
+    <%= slot %>
+  </title>
+
+  <link rel="stylesheet" href="<%= stylePath %>" />
+</head>
+
+<body>
+  <% if (framework==='preact' ) { -%>
+    <div id="app"></div>
+    <% } -%>
+      <script type="module" src="<%= entryModulePath %>"></script>
+</body>
+
+</html>

package/templates/tsconfig.json.ejs

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "skipLibCheck": true<% if (framework === 'preact') { %>,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
+      "react-dom": ["./node_modules/preact/compat/"],
+      "react-dom/*": ["./node_modules/preact/compat/*"]
+    }<% } %>
+  },
+  "include": ["src"]
+}

package/templates/vite.config.ts.ejs

@@ -0,0 +1,23 @@
+import { resolve } from 'path';
+
+import { defineConfig } from 'vite';
+<% if (framework === 'preact') { -%>
+import preact from '@preact/preset-vite';
+<% } -%>
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+<% slots.forEach((slot, i) => { -%>
+        '<%= slot %>': resolve(__dirname, '<%= slot %>.html')<%= i < slots.length - 1 ? ',' : '' %>
+<% }); -%>
+      },
+    },
+  },
+<% if (framework === 'preact') { -%>
+  plugins: [preact()],
+<% } -%>
+});