even more fixes to things

mProjectsCode · mProjectsCode · commit baea2a06a40b · 2024-02-26T00:11:45.000+01:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Obsidian Meta Bind Plugin
 
-A plugin for [Obsidian](https://obsidian.md/) to make your notes interactive with inline input fields, metadata displays, and buttons.
+A plugin for [Obsidian](https://obsidian.md/) to make your notes interactive with inline **input fields**, **metadata displays (view fields)**, and **buttons**.
 
 Meta Bind allows you to create input and view fields inside your notes.
 Those input and view fields can then be bound to frontmatter properties, which keeps them in sync those frontmatter properties.
@@ -11,6 +11,9 @@ When you click the toggle, the `done` property will switch between `true` and `f
 
 To learn more, check out the [docs](https://mprojectscode.github.io/obsidian-meta-bind-plugin-docs).
 
+> [!WARNING]
+> The next plugin version will probably be 1.0.0, which will include breaking changes to the plugins JavaScript API.
+
 ### Demo
 
 ![](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/raw/master/images/meta-bind-plugin-demo-3-gif.gif)
@@ -24,11 +27,6 @@ The plugin provides an offline FAQ/Help page as well, which can be accessed via
 
 You are more than welcome to open an issue on [GitHub](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues).
 
-#### The sync seems laggy / It takes half a second for the changes to sync
-
-This is intentional. To reduce the load on your hard drive the plugin ony syncs about 5 times a second.
-There is a setting to change the sync interval, but I don't recommend changing it.
-
 ### Contributions
 
 Thank you for wanting to contribute to this project.
@@ -38,7 +36,7 @@ Contributions are always welcome. If you have an idea, feel free to open a featu
 #### Notes for Contributors
 
 The plugin uses [Bun](https://bun.sh/) instead of Node.js/NPM to manage dependencies.
-To install the dependencies, run `bun install` in the root directory of the project.
+To install the dependencies, run `bun install` and `bun run pack:i` in the root directory of the project.
 
 -   `bun run dev` will build the plugin in dev mode and watch for changes. The plugin builds directly into the example vault inside of this repo.
 -   `bun run build` will build the plugin in production mode. The plugin builds into the root of this repo.
diff --git a/automation/installScript.ts b/automation/installScript.ts
@@ -3,10 +3,14 @@ import config from './config.json';
 
 async function installScript() {
 	for (const corePackage of config.corePackages) {
-		await $('bun i', `packages/${corePackage}`, Verboseness.NORMAL);
+		await $('rm -rf "node_modules"', `packages/${corePackage}`, Verboseness.VERBOSE);
+		await $('rm "bun.lockb"', `packages/${corePackage}`, Verboseness.VERBOSE);
+		await $('bun i', `packages/${corePackage}`, Verboseness.VERBOSE);
 	}
 
 	for (const nonCorePackage of config.packages) {
+		await $('rm -rf "node_modules"', `packages/${nonCorePackage}`, Verboseness.VERBOSE);
+		await $('rm "bun.lockb"', `packages/${nonCorePackage}`, Verboseness.VERBOSE);
 		await $('bun i', `packages/${nonCorePackage}`, Verboseness.NORMAL);
 	}
 }
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
@@ -52,7 +52,7 @@ const build = await esbuild.build({
 	},
 	plugins: [
 		esbuildSvelte({
-			compilerOptions: { css: 'injected' },
+			compilerOptions: { css: 'injected', dev: false, sveltePath: 'svelte' },
 			preprocess: sveltePreprocess(),
 			filterWarnings: warning => {
 				// we don't want warnings from node modules that we can do nothing about
diff --git a/esbuild.dev.config.mjs b/esbuild.dev.config.mjs
@@ -62,7 +62,7 @@ const context = await esbuild.context({
 			],
 		}),
 		esbuildSvelte({
-			compilerOptions: { css: 'injected' },
+			compilerOptions: { css: 'injected', dev: true, sveltePath: 'svelte' },
 			preprocess: sveltePreprocess(),
 			filterWarnings: warning => {
 				// we don't want warnings from node modules that we can do nothing about
diff --git a/exampleVault/Button Example.md b/exampleVault/Button Example.md
@@ -11,7 +11,7 @@ style: primary
 label: Open Meta Bind FAQ
 action:
   type: command
-  command: obsidian-meta-bind-plugin:mb-open-faq
+  command: obsidian-meta-bind-plugin:open-faq
 ```
 
 And custom JS buttons as well
diff --git a/exampleVault/Examples.md b/exampleVault/Examples.md
@@ -14,6 +14,7 @@ nested:
   object: test
 number1: 2
 number2: 10
+time: 
 ---
 
 ## Fields Work Everywhere
diff --git a/package.json b/package.json
@@ -45,14 +45,14 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.1",
 		"string-argv": "^0.3.2",
-		"svelte": "^4.2.11",
 		"svelte-preprocess": "^5.1.3",
 		"tslib": "2.6.2",
 		"typescript": "^5.3.3"
 	},
 	"dependencies": {
 		"@codemirror/legacy-modes": "^6.3.3",
 		"@lemons_dev/parsinom": "^0.0.12",
+		"svelte": "^4.2.11",
 		"itertools-ts": "^1.27.0",
 		"mathjs": "^12.0.0",
 		"zod": "^3.22.4",
diff --git a/packages/core/bun.lockb b/packages/core/bun.lockb
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,8 +1,7 @@
 {
 	"name": "meta-bind-core",
 	"main": "src/index.ts",
-	"devDependencies": {
-		"svelte": "^4.2.11",
+	"dependencies": {
 		"@lemons_dev/parsinom": "^0.0.12",
 		"zod": "^3.22.4"
 	}
diff --git a/packages/core/src/api/InternalAPI.ts b/packages/core/src/api/InternalAPI.ts
@@ -245,6 +245,7 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 			}),
 			{
 				title: 'Meta Bind Image Suggester',
+				classes: ['mb-image-suggester-modal'],
 			},
 		).open();
 	}
diff --git a/packages/core/src/modals/modalContents/ImageSuggesterModalComponent.svelte b/packages/core/src/modals/modalContents/ImageSuggesterModalComponent.svelte
@@ -30,7 +30,7 @@
 </div>
 <div class="mb-image-card-grid">
 	{#each filteredOptions as option}
-		<ImageSuggesterCard image={option.value} onSelect={onSelect}></ImageSuggesterCard>
+		<ImageSuggesterCard plugin={plugin} image={option.value} onSelect={onSelect}></ImageSuggesterCard>
 	{/each}
 </div>
 
diff --git a/packages/core/src/utils/InputFieldExamples.ts b/packages/core/src/utils/InputFieldExamples.ts
@@ -5,7 +5,7 @@ import {
 	type InputFieldType,
 	type ViewFieldType,
 } from 'packages/core/src/config/FieldConfigs';
-import { type UnvalidatedInputFieldDeclaration } from 'packages/core/src/parsers/inputFieldParser/InputFieldDeclaration';
+import { type InputFieldDeclaration } from 'packages/core/src/parsers/inputFieldParser/InputFieldDeclaration';
 
 export const INPUT_FIELD_EXAMPLE_DECLARATIONS: Record<InputFieldType, string> = {
 	date: 'date',
@@ -39,8 +39,8 @@ export const VIEW_FIELD_EXAMPLE_DECLARATIONS: Record<ViewFieldType, string> = {
 	invalid: '',
 };
 
-export function createInputFieldFAQExamples(plugin: IPlugin): [InputFieldType, UnvalidatedInputFieldDeclaration][] {
-	const ret: [InputFieldType, UnvalidatedInputFieldDeclaration][] = [];
+export function createInputFieldFAQExamples(plugin: IPlugin): [InputFieldType, InputFieldDeclaration][] {
+	const ret: [InputFieldType, InputFieldDeclaration][] = [];
 	for (const [type, declaration] of Object.entries(INPUT_FIELD_EXAMPLE_DECLARATIONS)) {
 		if (declaration === '') {
 			continue;
@@ -64,8 +64,9 @@ export function createInputFieldFAQExamples(plugin: IPlugin): [InputFieldType, U
 		});
 
 		parsedDeclaration = plugin.api.inputFieldParser.merge(parsedDeclaration, overrides);
+		const validatedDeclaration = plugin.api.inputFieldParser.validate(parsedDeclaration, '', undefined);
 
-		ret.push([type as InputFieldType, parsedDeclaration]);
+		ret.push([type as InputFieldType, validatedDeclaration]);
 	}
 	return ret;
 }
diff --git a/packages/core/src/utils/components/Button.svelte b/packages/core/src/utils/components/Button.svelte
@@ -1,7 +1,7 @@
 <!-- Inspired by https://github.com/marcusolsson/obsidian-svelte -->
 
 <script lang="ts">
-	import { ButtonStyleType } from '../../config/ButtonConfig';
+	import { ButtonStyleType } from 'packages/core/src/config/ButtonConfig';
 
 	export let variant: ButtonStyleType = ButtonStyleType.DEFAULT;
 	export let disabled: boolean = false;
diff --git a/packages/core/src/utils/components/ButtonComponent.svelte b/packages/core/src/utils/components/ButtonComponent.svelte
@@ -1,7 +1,7 @@
 <!-- Inspired by https://github.com/marcusolsson/obsidian-svelte -->
 
 <script lang="ts">
-	import { ButtonStyleType } from '../../config/ButtonConfig';
+	import { ButtonStyleType } from 'packages/core/src/config/ButtonConfig';
 
 	export let variant: ButtonStyleType = ButtonStyleType.DEFAULT;
 	export let disabled: boolean = false;
diff --git a/packages/core/src/utils/components/LinkComponent.svelte b/packages/core/src/utils/components/LinkComponent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MarkdownLink } from '../../parsers/MarkdownLinkParser';
+	import { MarkdownLink } from 'packages/core/src/parsers/MarkdownLinkParser';
 
 	export let mdLink: MarkdownLink;
 
diff --git a/packages/core/src/utils/components/LinkListComponent.svelte b/packages/core/src/utils/components/LinkListComponent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { MarkdownLink } from '../../parsers/MarkdownLinkParser';
-	import LinkComponent from './LinkComponent.svelte';
-	import ListWrapper from './ListWrapper.svelte';
+	import { MarkdownLink } from 'packages/core/src//parsers/MarkdownLinkParser';
+	import LinkComponent from 'packages/core/src/utils/components/LinkComponent.svelte';
+	import ListWrapper from 'packages/core/src/utils/components/ListWrapper.svelte';
 
 	export let mdLinkList: MarkdownLink[];
 </script>
diff --git a/packages/core/src/utils/components/LiteralRenderComponent.svelte b/packages/core/src/utils/components/LiteralRenderComponent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { stringifyAndLinkUnknown } from '../Literal';
-	import LinkComponent from './LinkComponent.svelte';
-	import ListWrapper from './ListWrapper.svelte';
+	import { stringifyAndLinkUnknown } from 'packages/core/src/utils/Literal';
+	import LinkComponent from 'packages/core/src/utils/components/LinkComponent.svelte';
+	import ListWrapper from 'packages/core/src/utils/components/ListWrapper.svelte';
 
 	export let value = undefined;
 
diff --git a/packages/core/src/utils/components/MountableComponent.svelte b/packages/core/src/utils/components/MountableComponent.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Mountable } from 'packages/core/src/utils/Mountable';
+	import { onDestroy, onMount } from 'svelte';
+
+	export let mountable: Mountable;
+
+	let element: HTMLElement;
+
+	onMount(() => {
+		mountable.mount(element);
+	});
+
+	onDestroy(() => {
+		mountable.unmount();
+	});
+</script>
+
+<div bind:this={element}></div>
diff --git a/packages/core/src/utils/faq/FaqComponent.svelte b/packages/core/src/utils/faq/FaqComponent.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
 	import ErrorIndicatorComponent from 'packages/core/src/utils/errors/ErrorIndicatorComponent.svelte';
-	import { App } from 'obsidian';
 	import { onMount } from 'svelte';
 	import { createInputFieldFAQExamples } from 'packages/core/src/utils/InputFieldExamples';
-	import MetaBindPlugin from '../main';
-	import InputFieldExampleComponent from './InputFieldExampleComponent.svelte';
+	import InputFieldExampleComponent from 'packages/core/src/utils/faq/InputFieldExampleComponent.svelte';
 	import Button from 'packages/core/src/utils/components/Button.svelte';
 	import { ErrorCollection } from 'packages/core/src/utils/errors/ErrorCollection';
 	import { ErrorLevel, MetaBindExampleError } from 'packages/core/src/utils/errors/MetaBindErrors';
 	import { DocsUtils } from 'packages/core/src/utils/DocsUtils';
+	import { ButtonStyleType } from 'packages/core/src/config/ButtonConfig';
+	import { IPlugin } from 'packages/core/src/IPlugin';
 
-	export let app: App;
-	export let plugin: MetaBindPlugin;
+	export let plugin: IPlugin;
 
 	let exampleWarningDeclaration = 'INPUT[someInputFieldDeclaration]';
 	let exampleWarningErrorCollection = new ErrorCollection('exampleWarningErrorCollection');
@@ -46,21 +45,19 @@
 	<h2>Quick Access</h2>
 	<p>
 		<Button
-			variant="primary"
+			variant={ButtonStyleType.PRIMARY}
 			on:click={() => {
 				DocsUtils.open(DocsUtils.linkToHome());
 			}}
 			>Docs
 		</Button>
 		<Button
-			variant="default"
 			on:click={() => {
 				DocsUtils.open(DocsUtils.linkToGithub());
 			}}
 			>GitHub
 		</Button>
 		<Button
-			variant="default"
 			on:click={() => {
 				DocsUtils.open(DocsUtils.linkToIssues());
 			}}
@@ -74,15 +71,19 @@
 		<a href={DocsUtils.linkToViewFields()}>View Fields</a>
 		<strong>warnings</strong> (
 		<ErrorIndicatorComponent
-			app={app}
-			declaration={exampleWarningDeclaration}
-			errorCollection={exampleWarningErrorCollection}
+			plugin={plugin}
+			settings={{
+				errorCollection: exampleWarningErrorCollection,
+				code: exampleWarningDeclaration,
+			}}
 		></ErrorIndicatorComponent>
 		) and <strong>errors</strong> (
 		<ErrorIndicatorComponent
-			app={app}
-			declaration={exampleErrorDeclaration}
-			errorCollection={exampleErrorErrorCollection}
+			plugin={plugin}
+			settings={{
+				errorCollection: exampleErrorErrorCollection,
+				code: exampleErrorDeclaration,
+			}}
 		></ErrorIndicatorComponent>
 		) can occur. These are <strong>clickable</strong> and will show a modal with detailed information about the error
 		when clicked.
@@ -95,8 +96,7 @@
 	</p>
 
 	{#each createInputFieldFAQExamples(plugin) as example}
-		<InputFieldExampleComponent type={example[0]} declaration={example[1]} plugin={plugin}
-		></InputFieldExampleComponent>
+		<InputFieldExampleComponent declaration={example[1]} plugin={plugin}></InputFieldExampleComponent>
 	{/each}
 
 	<h2>View Fields</h2>
diff --git a/packages/core/src/utils/faq/InputFieldExampleComponent.svelte b/packages/core/src/utils/faq/InputFieldExampleComponent.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { RenderChildType } from 'packages/core/src/config/FieldConfigs';
+	import { InputFieldDeclaration } from 'packages/core/src/parsers/inputFieldParser/InputFieldDeclaration';
+	import { InputFieldBase } from 'packages/core/src/fields/inputFields/InputFieldBase';
+	import { getUUID } from 'packages/core/src/utils/Utils';
+	import { IPlugin } from 'packages/core/src/IPlugin';
+	import MountableComponent from 'packages/core/src/utils/components/MountableComponent.svelte';
+
+	export let declaration: InputFieldDeclaration;
+	export let plugin: IPlugin;
+
+	let field = new InputFieldBase(plugin, getUUID(), '', RenderChildType.BLOCK, declaration);
+</script>
+
+<MountableComponent mountable={field}></MountableComponent>
diff --git a/packages/obsidian/bun.lockb b/packages/obsidian/bun.lockb
diff --git a/packages/obsidian/extraTypes/Dataview.d.ts b/packages/obsidian/extraTypes/Dataview.d.ts
@@ -0,0 +1,14 @@
+// custom types for the Dataview plugin
+
+declare module 'obsidian-dataview' {
+	export interface DataviewApi {
+		pages: (query: string, file: string) => DataArray<Record<string, Literal>>;
+	}
+
+	export interface DataArray<T> {
+		forEach: (callback: (value: T) => void) => void;
+	}
+
+	export type DataObject = { [key: string]: Literal };
+	export type Literal = boolean | number | string | Array<Literal> | DataObject | Function | null | HTMLElement;
+}
diff --git a/packages/obsidian/package.json b/packages/obsidian/package.json
@@ -1,13 +1,11 @@
 {
 	"name": "meta-bind-obsidian",
-	"devDependencies": {
+	"dependencies": {
 		"@codemirror/lang-javascript": "^6.2.1",
 		"@codemirror/language": "6.9.2",
 		"@codemirror/state": "6.3.1",
 		"@codemirror/view": "6.22.0",
 		"obsidian": "latest",
-		"obsidian-dataview": "0.5.56",
-		"svelte": "^4.2.11",
 		"@lemons_dev/parsinom": "^0.0.12",
 		"zod": "^3.22.4"
 	}
diff --git a/packages/obsidian/src/ObsUtils.ts b/packages/obsidian/src/ObsUtils.ts
@@ -1,6 +1,6 @@
 import { type API as JsEngineAPI } from 'jsEngine/api/API';
-import { type DataviewApi } from 'obsidian-dataview';
 import type MetaBindPlugin from 'packages/obsidian/src/main';
+import { type DataviewApi } from 'obsidian-dataview';
 
 export function getDataViewPluginAPI(plugin: MetaBindPlugin): DataviewApi {
 	/* eslint-disable */
diff --git a/packages/obsidian/src/faq/FaqView.ts b/packages/obsidian/src/faq/FaqView.ts
@@ -1,5 +1,5 @@
 import { ItemView, type WorkspaceLeaf } from 'obsidian';
-import FaqComponent from 'packages/obsidian/src/faq/FaqComponent.svelte';
+import FaqComponent from 'packages/core/src/utils/faq/FaqComponent.svelte';
 import type MetaBindPlugin from 'packages/obsidian/src/main';
 
 export const MB_FAQ_VIEW_TYPE = 'mb-faq-view-type';
@@ -23,13 +23,11 @@ export class FaqView extends ItemView {
 
 	// eslint-disable-next-line @typescript-eslint/require-await
 	async onOpen(): Promise<void> {
-		const container = this.containerEl.children[1];
-		container.empty();
+		this.contentEl.empty();
 
 		this.component = new FaqComponent({
-			target: container,
+			target: this.contentEl,
 			props: {
-				app: this.app,
 				plugin: this.plugin,
 			},
 		});
diff --git a/packages/obsidian/src/faq/InputFieldExampleComponent.svelte b/packages/obsidian/src/faq/InputFieldExampleComponent.svelte
diff --git a/packages/publish/bun.lockb b/packages/publish/bun.lockb
diff --git a/packages/publish/package.json b/packages/publish/package.json
diff --git a/styles.css b/styles.css

Original file line number	Diff line number	Diff line change
`@@ -3,10 +3,14 @@ import config from './config.json';`
`3`	`3`
`4`	`4`	`async function installScript() {`
`5`	`5`	`for (const corePackage of config.corePackages) {`
`6`		- await $('bun i', `packages/${corePackage}`, Verboseness.NORMAL);
	`6`	+ await $('rm -rf "node_modules"', `packages/${corePackage}`, Verboseness.VERBOSE);
	`7`	+ await $('rm "bun.lockb"', `packages/${corePackage}`, Verboseness.VERBOSE);
	`8`	+ await $('bun i', `packages/${corePackage}`, Verboseness.VERBOSE);
`7`	`9`	`}`
`8`	`10`
`9`	`11`	`for (const nonCorePackage of config.packages) {`
	`12`	+ await $('rm -rf "node_modules"', `packages/${nonCorePackage}`, Verboseness.VERBOSE);
	`13`	+ await $('rm "bun.lockb"', `packages/${nonCorePackage}`, Verboseness.VERBOSE);
`10`	`14`	await $('bun i', `packages/${nonCorePackage}`, Verboseness.NORMAL);
`11`	`15`	`}`
`12`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "meta-bind-core",`
`3`	`3`	`"main": "src/index.ts",`
`4`		`- "devDependencies": {`
`5`		`- "svelte": "^4.2.11",`
	`4`	`+ "dependencies": {`
`6`	`5`	`"@lemons_dev/parsinom": "^0.0.12",`
`7`	`6`	`"zod": "^3.22.4"`
`8`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -245,6 +245,7 @@ export abstract class InternalAPI<Plugin extends IPlugin> {`
`245`	`245`	`}),`
`246`	`246`	`{`
`247`	`247`	`title: 'Meta Bind Image Suggester',`
	`248`	`+ classes: ['mb-image-suggester-modal'],`
`248`	`249`	`},`
`249`	`250`	`).open();`
`250`	`251`	`}`