From 28cc8f196b9c84e3e72822fe2cd455be9366d640 Mon Sep 17 00:00:00 2001 From: Martin Lysk Date: Mon, 22 Jul 2024 19:40:06 +0200 Subject: [PATCH] WIP - non reactivity Version of crud working --- .../src/stories/inlang-bundle.ts | 1 + .../src/stories/inlang-variant.ts | 7 +- .../pattern-editor/inlang-pattern-editor.ts | 15 +- .../sample-app/src/MessageBundleView.tsx | 28 ++-- .../sdk-v2/sample-app/src/mainViewIframe.tsx | 136 ------------------ .../sample-app/src/messageBundleListReact.tsx | 16 +-- .../source-code/sdk-v2/src/loadProjectOpfs.ts | 7 +- .../source-code/sdk-v2/src/newProjectOpfs.ts | 1 + 8 files changed, 43 insertions(+), 168 deletions(-) delete mode 100644 inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts index 981f99a2c0..a2e52d1e68 100644 --- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts +++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts @@ -407,6 +407,7 @@ export default class InlangBundle extends LitElement { return html`) { + // 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 }) diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx index 26de78fffd..a3b69b7be9 100644 --- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx +++ b/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 { diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx deleted file mode 100644 index 0874fdf177..0000000000 --- a/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { useEffect, useState } from "react" -import { pluralBundle } from "../../src/v2/mocks/index.js" -import { randomHumanId } from "../../src/storage/human-id/human-readable-id.js" -import { createMessage, createMessageBundle } from "../../src/v2/helper.js" -import { MessageBundleList } from "./messageBundleListReact.js" -import { type InlangProject2, MessageBundle, getFs, loadProject } from "../../dist/v2/index.js" -import { SettingsView } from "./settingsView.js" -import * as Comlink from "comlink" - -export const isInIframe = window.self !== window.top -const fs = getFs(Comlink.windowEndpoint(window.parent)) -const repo = { - nodeishFs: fs, - getFirstCommitHash: () => "dummy_first_hash", -} as any - -export function MainViewIframe({ projectPath }: { projectPath: string }) { - const [currentProject, setCurrentProject] = useState(undefined) - - useEffect(() => { - loadProject({ - projectPath, - repo: repo, - }).then((project) => { - setCurrentProject(project) - }) - }, []) - - const [currentView, setCurrentView] = useState<"overview" | "messageList" | "settings">( - "settings" - ) - - const insertNMessageBundles = async (project: InlangProject2, n: number) => { - const messagesToAdd = [] as MessageBundle[] - for (let i = 0; i < n; i++) { - const newMessage = createMessage({ - locale: "de", - text: "new", - }) - - const messageBundle = createMessageBundle({ - alias: {}, - messages: [newMessage], - }) - messagesToAdd.push(messageBundle) - } - - const messageBundles = project.messageBundleCollection - if (n === 1) { - const temp = structuredClone(pluralBundle) - temp.id = randomHumanId() - temp.messages[0].id = randomHumanId() - temp.messages[1].id = randomHumanId() - - await messageBundles.insert(temp as any) - return - } - - console.time("inserting " + n + " messageBundles") - - await project.messageBundleCollection.bulkInsert(messagesToAdd) - console.timeEnd("inserting " + n + " messageBundles") - } - - return ( -
-

{isInIframe ? "inIframe" : "Fink 2"}

-
- {currentProject && ( - <> -
-

Actions

- Add Message Bundles - - - -
-
-
setCurrentView("overview")} - > - Overview -
-
setCurrentView("messageList")} - > - MessageList -
-
setCurrentView("settings")} - > - Settings -
-
- {currentView === "settings" && ( - - )} - {currentView === "messageList" && ( - - )} - - )} -
-
- ) -} diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx index 8f0d87f254..cedf9d8347 100644 --- a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx +++ b/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(undefined) + const [projectSettings, setProjectSettings] = useState(project.settings.get()) const [messageBundleCollection, setMessageBundleCollection] = useState() const [activeLocales, setActiveLocales] = useState([]) @@ -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() } }, []) diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts index b7fd917ccb..9c4542c170 100644 --- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts +++ b/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 & { 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) diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts index 6ceaa2c277..d4896fd169 100644 --- a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts +++ b/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`