@tialro2/rnbokit 1.0.0

package/README.md

@@ -0,0 +1,243 @@
+<img width="493" alt="Screenshot 2023-11-24 at 15 43 41" src="static/sreenshot.jpeg">
+
+# RNBOKit
+
+An easily extendable Sveltekit component library for seamlessly importing Cycling74's Max RNBO~ patches into your Svelte app.
+
+## Disclaimer
+
+~ warning #1: this package is still work in progress ~
+
+~ warning #2: this is my very first library & open source project, mistakes are bound to be made, so please do correct me on any mistake or practice I can do better! ~
+
+## Getting Started
+
+First set up a [Sveltekit project](https://kit.svelte.dev/docs/quick-start).
+
+Once you've created and installed your project add RNBOKit to your packages
+
+```bash
+npm install rnbokit
+```
+
+Or using pnpm:
+
+```bash
+pnpm install rnbokit
+```
+
+## Using RNBOKit in your project
+
+To start running RNBO patches in your Sveltekit project, you will need to export your RNBO~ patch for the web.
+
+<img width="597" alt="Screenshot 2023-05-26 at 17 20 39" src="https://github.com/SanderNotenbaert/RNBOKit/assets/34664737/c48b537f-79a1-4a4f-beef-cc5bf72addfc">
+
+It will create a folder which contains a .JSON file. You can export it directly into your project directory.
+
+<img width="567" alt="Screenshot 2023-05-26 at 17 22 03" src="https://github.com/SanderNotenbaert/RNBOKit/assets/34664737/534588d2-7bfe-4fa3-b686-3a2d5dca54d4">
+
+By default the <RNBO> component will look for a `patch.export.json` file in a `src/RNBO/` folder. For each inport, you have to provide a PNG file with the same name as the inport in the `static` directory (e.g. the file `in2.png` for an inport with the tag `in2`).
+Next you will need to import the RNBO component into your `+page.svelte` file.
+
+```svelte
+<script>
+	import { RNBO } from 'rnbokit';
+</script>
+
+<RNBO />
+```
+
+This is enough to start running the RNBO patch in your Sveltekit project. It will generate all the parameters and visualise any number messages from the outlet (0.-1.)
+
+## extending with custom slots
+
+You can customize how parameters or messages are handled by adding your own components in the RNBO tag. You can pass information from the RNBO component down to the child components by using Svelte's `let:` syntax. Some available objects are `dependencyFileCorrected` (ExternalDataInfo[]), `context` (AudioContext), `device` (Device), or `parameters` (Parameter[]). You can find more information on these in the [RNBO JS documentation](https://rnbo.cycling74.com/js).
+
+```svelte
+<script>
+	import { RNBO, RNBOParam } from 'rnbokit';
+</script>
+
+<RNBO let:parameters>
+	{#each parameters as parameter}
+		<!-- create custom components -->
+		<p>{parameter.name}</p>
+		<p>{parameter.value}</p>
+		<!-- or use the included UI components -->
+		<RNBOParam {parameter} />
+	{/each}
+</RNBO>
+```
+
+Here is the full list of all available variables:
+
+```svelte
+<script>
+	import { RNBO } from 'rnbokit';
+</script>
+
+<RNBO let:device <!-- type: Device - the device object, check RNBO js documentation -->
+	let:dependencyFileCorrected <!-- type: ExternalDataInfo[] - represents the json with dependencies of the patch, check RNBO js documentation -->
+	let:parameters <!-- type: Parameter[] - an array containing all RNBO parameters, check RNBO js documentation -->
+	let:context <!-- type: AudioContext - the audio context, see https://developer.mozilla.org/Web/API/AudioContext -->
+	let:inports <!-- type: MessageInfo[] - an array of objects containing info on each message inlet -->
+	let:inlets <!-- type: signalPort[] - an array of objects containing info on each signal inlet -->
+	let:outports <!-- type: MessageInfo[] - an array of objects containing info on each message outlet -->
+	let:outlets <!-- type: signalPort[] - an array of objects containing info on each signal outlet -->
+	let:midiInports <!-- type: Array<Number> - an array representing each midiInport as an index number -->
+	let:midiOutports <!-- type: Array<Number> - an array representing each midiOutport as an index number -->
+	>
+	<!-- do something with it here -->
+</RNBO>
+```
+
+In order to be able to change parameter values or send messages to inlets with custom parameter components, you'll need to bind `parameters` or `device` in the `<RNBO\>` component to a declared variable in the top level script. To control the value, bind the value of your own component to it as well.
+
+```svelte
+<script>
+	import { RNBO } from 'rnbokit';
+	//this example uses JSDoc for typing
+	/** @type {import ('@rnbo/js').Parameter[]} */
+	let patchParams;
+</script>
+
+<RNBO bind:parameters={patchParams}>
+	<div class="slidecontainer">
+		<input
+			type="range"
+			min={patchParams[1].min}
+			max={patchParams[1].max}
+			id={patchParams[1].name}
+			bind:value={patchParams[1].value}
+			class="RNBOslider"
+		/>
+		<p class="RNBOval">{patchParams[1].value}</p>
+	</div>
+</RNBO>
+```
+
+## Available components
+
+### RNBO specific components
+
+Here is the list of available RNBO components, to be used as slots of the `<RNBO>` component:
+
+```javascript
+import { RNBOParam } from 'rnbokit'; //required props: {parameters}
+import { RNBOInport } from 'rnbokit'; //required props: {inport} {device} - optional props: {min}, {max}
+import { RNBOOutport } from 'rnbokit'; //required props: {outport} {device} - optional props: {min}, {max}
+import { RNBOInlet } from 'rnbokit'; //required props: {inlet} {device} - optional props: {mode} options: 'mic', 'dropIn'
+import { RNBOMidiIn } from 'rnbokit'; //required props: {port} {device} - optional props: {mode} options: 'xy', 'external'
+//not working, RNBO bug
+//import { RNBOMidiOut } from 'rnbokit'; //required props: {port} {device}
+```
+
+### Utility components
+
+These are some internally used utility components which are not dependent on RNBO:
+
+```javascript
+import { AudioDropIn } from 'rnbokit';
+import { MicIn } from 'rnbokit';
+import { XYMidiIn } from 'rnbokit';
+import { ExtMidiIn } from 'rnbokit';
+// work in progress
+// import { ExtMidiOut } from 'rnbokit';
+```
+
+### UI components
+
+Internally used UI components, that can also be reused in different contexts:
+
+```javascript
+import { FileDropZone } from 'rnbokit';
+import { ProgressBar } from 'rnbokit';
+import { Radiogroup, RadioItem } from 'rnbokit';
+import { RangeSlider } from 'rnbokit';
+```
+
+## Styling
+
+The default styling is done with the internal RNBO.css stylesheet. If you want to change really fundamental styling you can edit/replace that one, but you can also simply declare the following css variables in your own global stylesheet:
+
+```css
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family: system-ui;
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 6px;
+	--theme-border-base: 1px;
+	/* =~= Color Properties =~= */
+	--theme-accent-color: 39, 145, 142;
+	--theme-surface-color: 38, 38, 38;
+	--theme-bg-color: 255, 255, 255;
+	--theme-font-color-base: 38, 38, 38;
+	/* =~= Animation Properties =~= */
+	--theme-animation-duration: 0.1s;
+	--theme-animation: all;
+	--theme-animation-function: ease-out;
+}
+```
+
+## Defaults
+
+Here is what it could look like if you'd recreate the RNBO component's default slot, for inspiration:
+
+```svelte
+<RNBO let:device let:midiInports let:inlets let:inports let:parameters let:outports>
+	<div class="RNBOsection">
+		<h1>patch.export.json</h1>
+
+		<!-- create input for each MIDI input port -->
+		{#if midiInports.length > 0}
+			<div class="RNBOsection">
+				<h2>MIDI inputs</h2>
+				{#each midiInports as port}
+					<RNBOMidiIn {port} {device} />
+				{/each}
+			</div>
+		{/if}
+
+		<!-- handle all signal inlets -->
+		{#if inlets.length > 0}
+			<div class="RNBOsection">
+				<h2>signal inlets</h2>
+				{#each inlets as inlet}
+					<RNBOInlet {inlet} {device} />
+				{/each}
+			</div>
+		{/if}
+
+		<!-- handle all event inlets -->
+		{#if inports.length > 0}
+			<div class="RNBOsection">
+				<!-- list only the event inlets (skip signal ones) -->
+				<h2>message inlets</h2>
+				{#each inports as inport}
+					<RNBOInport {inport.tag} {device} />
+				{/each}
+			</div>
+		{/if}
+
+		<!-- handle all parameters -->
+		{#if parameters.length > 0}
+			<div class="RNBOsection">
+				<h2>parameters</h2>
+				{#each parameters as parameter}
+					<RNBOParam {parameter} />
+				{/each}
+			</div>
+		{/if}
+
+		<!-- handle all event outlets -->
+		{#if outports.length > 0}
+			<div class="RNBOsection">
+				<h2>outport events</h2>
+				{#each outports as outport}
+					<RNBOOutport {outport} {device} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+</RNBO>
+```

package/dist/RNBO.css

@@ -0,0 +1,113 @@
+/* RNBO.css */
+body {
+	font-family: var(--local-font-family);
+	color: rgb(var(--local-font-color));
+	accent-color: rgb(var(--local-accent-color));
+	background-color: rgb(var(--local-bg-color));
+}
+h1 {
+	/* @apply text-4xl p-2 m-2 font-bold; */
+	font-size: 2.25rem; /* 36px */
+	line-height: 2.5rem; /* 40px */
+	font-weight: 700;
+	padding: 0.5rem;
+	margin: 0.5rem;
+}
+h2 {
+	/* @apply text-2xl p-2 m-2 font-bold; */
+	font-size: 1.5rem; /* 24px */
+	line-height: 2rem; /* 32px */
+	font-weight: 700;
+	padding: 0.5rem;
+	margin: 0.5rem;
+}
+.RNBOtext {
+	/* @apply p-2 m-2; */
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+.RNBOsection {
+	box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.5);
+	padding: 1rem;
+	margin: 1rem;
+	border-radius: var(--local-rounded-container);
+	background-image: linear-gradient(rgb(0 0 0/5%) 0 0);
+}
+.RNBOcomponent {
+	/* @apply p-2 m-2; */
+	padding: 1rem;
+	margin: 1rem;
+}
+.RNBOsubcomponent {
+	/* @apply p-2 m-2; */
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+.RNBOtag {
+	/* @apply font-bold; */
+	font-weight: 700;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
+.RNBOval {
+	/* @apply text-xs; */
+	font-size: 0.75rem; /* 12px */
+	line-height: 1rem; /* 16px */
+}
+.RNBOalign {
+	/* @apply flex justify-between items-center  */
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+.RNBOslider {
+	width: 100%;
+	cursor: pointer;
+	/* transition: var(--local-animation) var(--local-animation-duration); */
+	/* transition-timing-function: var(--local-animation-function); */
+}
+.RNBOplaceholder {
+	background-color: rgba(var(--local-surface-color), 0.2);
+	border-radius: var(--local-rounded-base);
+	height: 2rem;
+	padding: 0.5rem;
+	margin: 0.5rem;
+	animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+:root {
+	/* =~= Theme Properties =~= */
+	--local-font-family: var(--theme-font-family, system-ui);
+	/* --theme-font-color-dark: 255 255 255; */
+	--local-rounded-base: var(--theme-rounded-base, 20px);
+	--local-rounded-container: var(--theme-rounded-container, 6px);
+	--local-border-base: var(--theme-border-base, 1px);
+	/* =~= Color Properties =~= */
+	--local-accent-color: var(--theme-accent-color, 39, 145, 142);
+	--local-surface-color: var(--theme-surface-color, 38, 38, 38);
+	--local-bg-color: var(--theme-bg-color, 255, 255, 255);
+	--local-font-color: var(--theme-font-color-base, 38, 38, 38);
+	/* =~= Animation Properties =~= */
+	--local-animation-duration: var(--theme-animation-duration, 0.1s);
+	--local-animation: var(--theme-animation, all);
+	--local-animation-function: var(--theme-animation-function, ease-out);
+}

package/dist/RNBO.svelte

@@ -0,0 +1,230 @@
+<script>
+	import './RNBO.css';
+	import { onMount } from 'svelte';
+	import rnbo from '@rnbo/js';
+	const { BaseDevice, createDevice } = rnbo;
+	import RNBOParam from './RNBOcomponents/RNBOParam.svelte';
+	import RNBOOutport from './RNBOcomponents/RNBOOutport.svelte';
+	import RNBOInport from './RNBOcomponents/RNBOInport.svelte';
+	import RNBOInlet from './RNBOcomponents/RNBOInlet.svelte';
+	import RNBOMidiIn from './RNBOcomponents/RNBOMidiIn.svelte';
+	// import RNBOMidiOut from './RNBOcomponents/RNBOMidiOut.svelte';
+	import path from 'path-browserify';
+
+	// Create AudioContext
+	/** @type {AudioContext|undefined} */
+	let context = $state(undefined);
+
+	const loadContext = () => {
+		// @ts-ignore
+		let WAContext = window.AudioContext || window.webkitAudioContext;
+		context = new WAContext({ sampleRate: 44100 });
+	};
+
+	// Create device
+
+	/** @type {import ('@rnbo/js').IPatcher|undefined} */
+	let patcher = $state(undefined);
+
+	/** @type {import ('@rnbo/js').ExternalDataInfo[]|undefined} */
+	let dependencyFileCorrected = $state(undefined);
+
+	/** @typedef {object} signalPort
+	 * @property {number} index - the port index
+	 * @property {string} tag - the tag
+	 * @property {'signal'} type - the type
+	 * @property {string} meta - the meta
+	 */
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [patchName]
+	 * @property {import ('@rnbo/js').Device|undefined} [device]
+	 * @property {import ('@rnbo/js').Parameter[]} [parameters]
+	 * @property {import ('@rnbo/js').MessageInfo[]} [inports]
+	 * @property {signalPort[]} [inlets]
+	 * @property {Array<Number>} [midiOutports]
+	 * @property {import ('@rnbo/js').MessageInfo[]} [outports]
+	 * @property {signalPort[]} [outlets]
+	 * @property {Array<Number>} [midiInports]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props} */
+	let {
+		patchName,
+		device = $bindable(undefined),
+		parameters = $bindable([]),
+		inports = $bindable([]),
+		inlets = $bindable([]),
+		midiOutports = $bindable([]),
+		outports = $bindable([]),
+		outlets = $bindable([]),
+		midiInports = $bindable([]),
+		children
+	} = $props();
+
+	// set up device
+	const deviceSetup = async () => {
+		const modules = import.meta.glob('/src/RNBO/export/*'),
+			exportPath = '/src/RNBO/export/';
+
+		//import the patcher json dynamically!
+		const patchPath = path.join(exportPath, patchName);
+		patcher = await modules[patchPath]();
+
+		if (patcher && context) {
+			//import the dependency json dynamically!
+			const dependenciesPath = path.join(exportPath, 'dependencies.json');
+			const dependencyFile = (await modules[dependenciesPath]()).default;
+
+			dependencyFileCorrected = dependencyFile.map((dependency) => {
+				if (BaseDevice.bufferDescriptionHasRemoteURL(dependency)) {
+					return dependency;
+				}
+				const newFile = path.join(exportPath, dependency.file);
+				return Object.assign({}, dependency, { file: newFile });
+			});
+
+			device = await createDevice({ context, patcher });
+
+			//load dependencies if they exist
+			if (dependencyFileCorrected && dependencyFileCorrected.length) {
+				device.loadDataBufferDependencies(dependencyFileCorrected);
+			}
+			device.node.connect(context.destination);
+
+			parameters = device.parameters;
+
+			inports = device.inports;
+
+			// @ts-expect-error - desc.inlets does indeed exist
+			inlets = patcher.desc.inlets.filter((inlet) => inlet.type === 'signal');
+
+			midiInports = Array.from({ length: device.numMIDIInputPorts }, (_, i) => i + 1);
+
+			outports = device.outports;
+
+			// @ts-expect-error - desc.outlets does indeed exist
+			outlets = patcher.desc.outlets.filter((outlet) => outlet.type === 'signal');
+
+			midiOutports = Array.from({ length: device.numMIDIOutputPorts }, (_, i) => i + 1);
+		} else if (!patcher) {
+			throw new Error('No patcher found!');
+		}
+		if (!context) {
+			throw new Error('No context found!');
+		}
+	};
+
+	// load on client side only (no Window server side)
+	onMount(async () => {
+		loadContext();
+		deviceSetup();
+	});
+</script>
+
+<!-- html -->
+{#if patcher && device && context}
+	<div
+		onclick={() => context?.resume()}
+		onkeydown={() => context?.resume()}
+		role="button"
+		tabindex="-2"
+	>
+		{#if children}{@render children({
+				patcher,
+				device,
+				dependencyFileCorrected,
+				parameters,
+				context,
+				inports,
+				inlets,
+				outports,
+				outlets,
+				midiInports,
+				midiOutports
+			})}{:else}
+			<div class="RNBOsection">
+				<!-- use the json file name as header -->
+				<h1>patch.export.json</h1>
+
+				<!-- create input for each MIDI input port -->
+				{#if midiInports.length > 0}
+					<div class="RNBOsection">
+						<h2>MIDI inputs</h2>
+						{#each midiInports as port}
+							<RNBOMidiIn {port} {device} />
+						{/each}
+					</div>
+				{/if}
+
+				<!-- handle all signal inlets -->
+				{#if inlets.length > 0}
+					<div class="RNBOsection">
+						<h2>signal inlets</h2>
+						{#each inlets as inlet}
+							<RNBOInlet {inlet} {device} />
+						{/each}
+					</div>
+				{/if}
+
+				<!-- handle all event inlets -->
+				{#if inports.length > 0}
+					<div class="RNBOsection">
+						<!-- list only the event inlets (skip signal ones) -->
+						<h2>message inlets</h2>
+						{#each inports as inport}
+							<RNBOInport tag={inport.tag} {device} />
+						{/each}
+					</div>
+				{/if}
+
+				<!-- handle all parameters -->
+				{#if parameters.length > 0}
+					<div class="RNBOsection">
+						<h2>parameters</h2>
+						{#each parameters as parameter}
+							<RNBOParam {parameter} />
+						{/each}
+					</div>
+				{/if}
+
+				<!-- handle all event outlets -->
+				{#if outports.length > 0}
+					<div class="RNBOsection">
+						<h2>message outlets</h2>
+						{#each outports as outport}
+							<RNBOOutport {outport} {device} />
+						{/each}
+					</div>
+				{/if}
+
+				<!-- midi outs not working yet (RNBO bug?????), exclude for now -->
+				<!-- <div class="RNBOsection">
+					<h2>MIDI outputs</h2>
+					{#each Array(device.numMIDIOutputPorts) as _, port}
+						<RNBOMidiOut {port} {device} />
+					{/each}
+				</div> -->
+			</div>
+		{/if}
+	</div>
+{:else}
+	<!-- show a placeholder skeleton when loading -->
+	<div class="RNBOsection">
+		<div class="RNBOplaceholder"></div>
+		<div class="RNBOsection">
+			<div class="RNBOplaceholder"></div>
+			<div class="RNBOsection">
+				<div class="RNBOplaceholder"></div>
+			</div>
+		</div>
+		<div class="RNBOsection">
+			<div class="RNBOplaceholder"></div>
+		</div>
+		<div class="RNBOsection">
+			<div class="RNBOplaceholder"></div>
+		</div>
+	</div>
+{/if}

package/dist/RNBO.svelte.d.ts

@@ -0,0 +1,97 @@
+export default RNBO;
+type RNBO = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const RNBO: import("svelte").Component<{
+    patchName?: string;
+    device?: import("@rnbo/js").Device | undefined;
+    parameters?: import("@rnbo/js").Parameter[];
+    inports?: import("@rnbo/js").MessageInfo[];
+    inlets?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    }[];
+    midiOutports?: Array<number>;
+    outports?: import("@rnbo/js").MessageInfo[];
+    outlets?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    }[];
+    midiInports?: Array<number>;
+    children?: import("svelte").Snippet<[any]>;
+}, {}, "device" | "inports" | "parameters" | "inlets" | "midiOutports" | "outports" | "outlets" | "midiInports">;
+type Props = {
+    patchName?: string;
+    device?: import("@rnbo/js").Device | undefined;
+    parameters?: import("@rnbo/js").Parameter[];
+    inports?: import("@rnbo/js").MessageInfo[];
+    inlets?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    }[];
+    midiOutports?: Array<number>;
+    outports?: import("@rnbo/js").MessageInfo[];
+    outlets?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    }[];
+    midiInports?: Array<number>;
+    children?: import("svelte").Snippet<[any]>;
+};