js view field syntax highlighting and hidden

Author: mProjectsCode

bun.lockb

@@ -21,6 +21,7 @@ return engine.markdown.create(`**${context.bound.n1 * context.bound.n2}** km`);
 ```meta-bind-js-view
 {number1} as n1
 save to {n1clone}
+hidden
 ---
 return context.bound.n1;
 ```

exampleVault/View Fields/JS View Field.md

@@ -144,8 +144,9 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 	 * @param container
 	 * @param filePath
 	 * @param code
+	 * @param hidden
 	 */
-	abstract createJsRenderer(container: HTMLElement, filePath: string, code: string): IJsRenderer;
+	abstract createJsRenderer(container: HTMLElement, filePath: string, code: string, hidden: boolean): IJsRenderer;
 
 	/**
 	 * Open a specific file.

packages/core/src/api/InternalAPI.ts

@@ -140,7 +140,12 @@ export class JsViewFieldMountable extends FieldMountable {
 		const wrapperEl: HTMLDivElement = document.createElement('div');
 		DomHelpers.addClass(wrapperEl, 'mb-view-wrapper');
 
-		this.jsRenderer = this.plugin.internal.createJsRenderer(wrapperEl, this.getFilePath(), this.declaration.code);
+		this.jsRenderer = this.plugin.internal.createJsRenderer(
+			wrapperEl,
+			this.getFilePath(),
+			this.declaration.code,
+			this.declaration.hidden,
+		);
 
 		this.registerSelfToMetadataManager();
 

packages/core/src/fields/viewFields/JsViewFieldMountable.ts

@@ -107,14 +107,16 @@ const P_JsViewFieldBindTargetMapping: Parser<UnvalidatedJsViewFieldBindTargetMap
 );
 
 export const P_JsViewFieldDeclaration: Parser<PartialUnvalidatedJsViewFieldDeclaration> = P.sequenceMap(
-	(bindTargetMappings, writeToBindTarget, code) => {
+	(bindTargetMappings, writeToBindTarget, hidden, code) => {
 		return {
 			bindTargetMappings: bindTargetMappings,
 			writeToBindTarget: writeToBindTarget,
+			hidden: hidden !== undefined,
 			code: code,
 		} satisfies PartialUnvalidatedJsViewFieldDeclaration;
 	},
 	P_JsViewFieldBindTargetMapping.separateBy(P_UTILS.whitespace()).skip(P_UTILS.whitespace()),
 	P.string('save to ').then(P_BindTarget.wrapString('{', '}')).skip(P_UTILS.whitespace()).optional(),
+	P.string('hidden').skip(P_UTILS.whitespace()).optional(),
 	P.string('---').then(P_UTILS.remaining()),
 );

packages/core/src/parsers/nomParsers/ViewFieldNomParsers.ts

@@ -32,6 +32,7 @@ export class JsViewFieldParser {
 			errorCollection: errorCollection,
 			bindTargetMappings: [],
 			writeToBindTarget: undefined,
+			hidden: false,
 			code: '',
 		};
 	}
@@ -55,6 +56,7 @@ export class JsViewFieldParser {
 			writeToBindTarget: this.plugin.api.bindTargetParser.fromExistingDeclaration(
 				simpleDeclaration.writeToBindTarget,
 			),
+			hidden: simpleDeclaration.hidden ?? false,
 			errorCollection: errorCollection,
 		};
 	}
@@ -109,6 +111,7 @@ export class JsViewFieldParser {
 			}
 
 			declaration.code = unvalidatedDeclaration.code;
+			declaration.hidden = unvalidatedDeclaration.hidden;
 
 			return declaration;
 		} catch (e) {
@@ -120,6 +123,7 @@ export class JsViewFieldParser {
 			errorCollection: declaration.errorCollection,
 			bindTargetMappings: [],
 			writeToBindTarget: undefined,
+			hidden: false,
 			code: '',
 		};
 	}

packages/core/src/parsers/viewFieldParser/JsViewFieldParser.ts

@@ -41,6 +41,7 @@ export interface SimpleViewFieldDeclaration {
 export interface JsViewFieldDeclaration extends FieldDeclaration {
 	bindTargetMappings: JsViewFieldBindTargetMapping[];
 	writeToBindTarget?: BindTargetDeclaration | undefined;
+	hidden: boolean;
 	code: string;
 }
 
@@ -54,6 +55,7 @@ export interface UnvalidatedJsViewFieldDeclaration extends PartialUnvalidatedJsV
 export interface PartialUnvalidatedJsViewFieldDeclaration {
 	bindTargetMappings: UnvalidatedJsViewFieldBindTargetMapping[];
 	writeToBindTarget?: UnvalidatedBindTargetDeclaration | undefined;
+	hidden: boolean;
 	code: string;
 }
 
@@ -65,6 +67,7 @@ export interface UnvalidatedJsViewFieldBindTargetMapping {
 export interface SimpleJsViewFieldDeclaration {
 	bindTargetMappings: SimpleJsViewFieldBindTargetMapping[];
 	writeToBindTarget?: BindTargetDeclaration | undefined;
+	hidden?: boolean;
 	code: string;
 }
 

packages/core/src/parsers/viewFieldParser/ViewFieldDeclaration.ts

@@ -135,8 +135,8 @@ export class ObsidianInternalAPI extends InternalAPI<MetaBindPlugin> {
 		return () => component.unload();
 	}
 
-	public createJsRenderer(container: HTMLElement, filePath: string, code: string): IJsRenderer {
-		return new ObsidianJsRenderer(this.plugin, container, filePath, code);
+	public createJsRenderer(container: HTMLElement, filePath: string, code: string, hidden: boolean): IJsRenderer {
+		return new ObsidianJsRenderer(this.plugin, container, filePath, code, hidden);
 	}
 
 	public openFile(filePath: string, callingFilePath: string, newTab: boolean): void {

packages/obsidian/src/ObsidianInternalAPI.ts

@@ -12,12 +12,14 @@ export class ObsidianJsRenderer implements IJsRenderer {
 	file: TFile;
 	jsEngine: API;
 	code: string;
+	hidden: boolean;
 	renderComponent: Component;
 
-	constructor(plugin: MetaBindPlugin, containerEl: HTMLElement, filePath: string, code: string) {
+	constructor(plugin: MetaBindPlugin, containerEl: HTMLElement, filePath: string, code: string, hidden: boolean) {
 		this.plugin = plugin;
 		this.containerEl = containerEl;
 		this.code = code;
+		this.hidden = hidden;
 
 		const file = plugin.app.vault.getAbstractFileByPath(filePath);
 		if (!(file instanceof TFile)) {
@@ -58,7 +60,9 @@ export class ObsidianJsRenderer implements IJsRenderer {
 				this.file.path,
 				this.renderComponent,
 			);
-			await renderer.render(execution.result);
+			if (!this.hidden) {
+				await renderer.render(execution.result);
+			}
 
 			const simpleObject = renderer.convertToSimpleObject(execution.result);
 

packages/obsidian/src/ObsidianJsRenderer.ts

@@ -1,4 +1,5 @@
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { javascript } from '@codemirror/legacy-modes/mode/javascript';
 import { type Mode, type StringStream } from 'codemirror';
 import { SyntaxHighlighting } from 'packages/core/src/parsers/syntaxHighlighting/SyntaxHighlighting';
 import type MetaBindPlugin from 'packages/obsidian/src/main';
@@ -30,6 +31,25 @@ export function registerCm5HLModes(plugin: MetaBindPlugin): void {
 		return mode;
 	});
 
+	window.CodeMirror.defineMode('meta-bind-js-view', _config => {
+		const mode: Mode<any> = {
+			startState: () => {
+				return javascript.startState?.(4);
+			},
+			blankLine: (state: any) => {
+				return javascript.blankLine?.(state, 4);
+			},
+			copyState: (_state: any) => {
+				return javascript.startState?.(4);
+			},
+			token: (stream: any, state: any) => {
+				return `line-HyperMD-codeblock ${javascript.token?.(stream, state)}`;
+			},
+		};
+
+		return mode;
+	});
+
 	const codeBlockEndRegexp = /^\s*(```+|~~~+)/;
 
 	type MBModeState = {