WIP - non reactivity Version of crud working

inlang/source-code/bundle-component/src/stories/inlang-bundle.ts

@@ -407,6 +407,7 @@ export default class InlangBundle extends LitElement {
 								return html`<inlang-variant
 									slot="variant"
 									.variant=${variant}
+									.bundleId=${this.bundle!.id}
 									.message=${message}
 									.inputs=${this._inputs()}
 									.triggerSave=${this._triggerSave}

inlang/source-code/bundle-component/src/stories/inlang-variant.ts

@@ -135,6 +135,9 @@ export default class InlangVariant extends LitElement {
 		`,
 	]
 
+	@property()
+	bundleId: string | undefined
+
 	//props
 	@property()
 	message: NestedMessage | undefined
@@ -359,9 +362,7 @@ export default class InlangVariant extends LitElement {
 							!this.message?.selectors
 								? html`<inlang-selector-configurator
 										.inputs=${this.inputs}
-										.bundleId=${this.message?.bundleId
-											? this.message?.bundleId
-											: "TODO SDK-v2 @nils check how we deal with undefined"}
+										.bundleId=${this.message?.bundleId ? this.message?.bundleId : this.bundleId!}
 										.message=${this.message}
 										.locale=${this.locale}
 										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}

inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts

@@ -37,7 +37,6 @@ export default class InlangPatternEditor extends LitElement {
 
 	// dispatch `change-pattern` event with the new pattern
 	dispatchOnChangePattern(pattern: Pattern) {
-		debugger
 		const onChangePattern = new CustomEvent("change-pattern", {
 			detail: {
 				argument: pattern,
@@ -63,6 +62,17 @@ export default class InlangPatternEditor extends LitElement {
 		}
 	}
 
+	// // update editor when pattern changes
+	// override updated(changedProperties: Map<string | number | symbol, unknown>) {
+	// 	if (
+	// 		changedProperties.has("pattern")
+	// 		// TODO how do wset the pettern?
+	// 	) {
+	// 		// debugger
+	// 		this._setEditorState()
+	// 	}
+	// }
+
 	// set editor state
 	private _setEditorState = () => {
 		this._removeTextContentListener?.()
@@ -115,13 +125,10 @@ export default class InlangPatternEditor extends LitElement {
 			this.editor.setRootElement(contentEditableElement)
 			registerPlainText(this.editor)
 
-			console.log("registering event first time")
 			// listen to text content changes and dispatch `change-pattern` event
 			this._removeTextContentListener = this.editor.registerTextContentListener(
 				(textContent: any) => {
 					// The latest text content of the editor!
-					console.log("textContent:", textContent)
-
 					//check if something changed
 
 					this._patternState = stringToPattern({ text: textContent })

inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx

@@ -5,7 +5,7 @@ import { ProjectSettings2 } from "../../src/types/project-settings.js"
 import { InlangProject } from "../../src/types/project.js"
 import { LintReport } from "../../src/types/lint.js"
 import { LanguageTag } from "../../src/types/language-tag.js"
-import { NestedBundle } from "../../src/index.js"
+import { NestedBundle, NestedMessage, Variant } from "../../src/index.js"
 
 export const MessageBundleComponent = createComponent({
 	tagName: "inlang-bundle",
@@ -18,6 +18,7 @@ export const MessageBundleComponent = createComponent({
 
 		insertVariant: "insert-variant",
 		updateVariant: "update-variant",
+		deleteVariant: "delete-variant",
 		fixLint: "fix-lint",
 	},
 })
@@ -57,17 +58,25 @@ function MessageBundleView({
 		// project.messageBundleCollection?.upsert(messageBundle.detail.argument)
 	}
 
-	const onMesageInsert = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onMesageInsert", event)
+	const onMesageInsert = (event: { detail: { argument: { message: NestedMessage } } }) => {
+		const insertedMessage = event.detail.argument.message
+		const dbPromise = project.message.insert(insertedMessage).execute()
 	}
-	const onMesageUpdate = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onMesageUpdate", event)
+	const onMesageUpdate = (event: { detail: { argument: { message: NestedMessage } } }) => {
+		const updatedMessage = event.detail.argument.message
+		const dbPromise = project.message.update(updatedMessage).execute()
 	}
-	const onVariantInsert = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onVariantInsert", event)
+	const onVariantInsert = (event: { detail: { argument: { variant: Variant } } }) => {
+		const insertedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.insert(insertedVariant).execute()
 	}
-	const onVariantUpdate = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onVariantUpdate", event)
+	const onVariantUpdate = (event: { detail: { argument: { variant: Variant } } }) => {
+		const updatedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.update(updatedVariant).execute()
+	}
+	const onVariantDelete = (event: { detail: { argument: { variant: Variant } } }) => {
+		const deletedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.delete(deletedVariant).execute()
 	}
 
 	return (
@@ -80,6 +89,7 @@ function MessageBundleView({
 			updateMessage={onMesageUpdate as any}
 			insertVariant={onVariantInsert as any}
 			updateVariant={onVariantUpdate as any}
+			deleteVariant={onVariantDelete as any}
 			filteredLocales={filteredLocales.length > 0 ? filteredLocales : undefined}
 			fixLint={(e: any) => {
 				const { fix, lintReport } = e.detail.argument as {

inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx

@@ -21,7 +21,7 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	const [currentListBundles, setCrurrentListBundles] = useState([] as NestedBundle[])
 
 	const [lintReports, setLintReports] = useState([] as LintReport[])
-	const [projectSettings, setProjectSettings] = useState<ProjectSettings2 | undefined>(undefined)
+	const [projectSettings, setProjectSettings] = useState<ProjectSettings2>(project.settings.get())
 	const [messageBundleCollection, setMessageBundleCollection] = useState<any>()
 
 	const [activeLocales, setActiveLocales] = useState<LanguageTag[]>([])
@@ -38,19 +38,9 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	}, [textSearch, activeLocales])
 
 	useEffect(() => {
-		let inlangProject: InlangProject | undefined = undefined
-
-		inlangProject = project
-
-		// inlangProject.settings.subscribe({
-		// 	next: (settings) => {
-		// 		setProjectSettings(settings)
-		// 	},
-		// })
-		setProjectSettings(inlangProject.settings.get())
-
+		const settingsSubscription = project.settings.subscribe(setProjectSettings)
 		return () => {
-			// unsubscribe inlangProject?.settings()
+			settingsSubscription.unsubscribe()
 		}
 	}, [])
 

inlang/source-code/sdk-v2/src/loadProjectOpfs.ts

@@ -140,7 +140,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			set: async (settings: ProjectSettings2) => {
 				// TODO SDK-v2 implement
 			},
-			subscribe: projectSettings$.asObservable().subscribe,
+			subscribe: () => projectSettings$.subscribe(),
 		},
 		bundle: {
 			select: db.selectFrom("bundle"),
@@ -176,6 +176,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			update: (message: Partial<Message> & { id: string }) => {
 				const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete messageProperties.id
+				delete messageProperties.variants
 				if (message.declarations) {
 					messageProperties.declarations = json(message.declarations) as any
 				}
@@ -204,11 +205,11 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 				const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete variantProperties.id
 				if (variant.match) {
-					variantProperties.declarations = json(variant.match) as any
+					variantProperties.match = json(variant.match) as any
 				}
 				if (variant.pattern) {
 					// TODO SDK-v2 shall we structure clone here?
-					variantProperties.selectors = json(variant.pattern) as any
+					variantProperties.pattern = json(variant.pattern) as any
 				}
 
 				return db.updateTable("variant").set(variantProperties).where("variant.id", "=", variant.id)

inlang/source-code/sdk-v2/src/newProjectOpfs.ts

@@ -29,6 +29,7 @@ export async function newProjectOpfs(args: {
 	await writableStream.close()
 
 	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
+	await projectDir.removeEntry("inlang.sqlite")
 	const { sql, destroy } = new SQLocal(sqliteDbFilePath)
 
 	await sql`