Update-bundle-component

inlang/source-code/bundle-component/package.json

@@ -34,7 +34,6 @@
 		"@types/chroma-js": "^2.4.4",
 		"@vitest/coverage-v8": "^0.33.0",
 		"lit": "^3.1.2",
-		"npm": "^10.8.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"rollup": "3.29.1",

inlang/source-code/bundle-component/src/helper/patternToString.test.ts

@@ -12,7 +12,7 @@ describe("patternToString", () => {
 			{
 				type: "expression",
 				arg: {
-					type: "variable",
+					type: "variable-reference",
 					name: "name",
 				},
 			},

inlang/source-code/bundle-component/src/helper/stringToPattern.test.ts

@@ -16,7 +16,7 @@ describe("stringToPattern", () => {
 			{
 				type: "expression",
 				arg: {
-					type: "variable",
+					type: "variable-reference",
 					name: "name",
 				},
 			},

inlang/source-code/bundle-component/src/helper/stringToPattern.ts

@@ -30,7 +30,7 @@ const stringToPattern = (props: { text: string }): Pattern => {
 			pattern.push({
 				type: "expression",
 				arg: {
-					type: "variable",
+					type: "variable-reference",
 					name: match[1],
 				},
 			})

inlang/source-code/bundle-component/src/mock/messageBundle.ts

@@ -1,40 +1,42 @@
-import type { BundleNested } from "@inlang/sdk2"
+import type { Bundle, Message, Variant } from "@inlang/sdk2"
 
-export const bundleWithoutSelectors: BundleNested = {
-	id: "message-bundle-id",
+export const exampleWithoutSelectors: {
+	bundles: Bundle[]
+	messages: Message[]
+	variants: Variant[]
+} = {
+	bundles: [
+		{
+			id: "message-bundle-id",
+			declarations: [],
+		},
+	],
 	messages: [
 		{
 			bundleId: "message-bundle-id",
 			id: "message-id-en",
 			locale: "en",
 			selectors: [],
-			declarations: [],
-			variants: [
-				{
-					messageId: "message-id-en",
-					id: "variant-id-en-*",
-					match: {},
-					pattern: [{ type: "text", value: "{count} new messages" }],
-				},
-			],
 		},
 		{
 			bundleId: "message-bundle-id",
 			id: "message-id-de",
 			locale: "de",
 			selectors: [],
-			declarations: [],
-			variants: [
-				{
-					messageId: "message-id-de",
-					id: "variant-id-de-*",
-					match: {},
-					pattern: [{ type: "text", value: "{count} neue Nachrichten" }],
-				},
-			],
 		},
 	],
-	// 	default: "frontend_button_text",
-	// 	ios: "frontendButtonText",
-	// },
+	variants: [
+		{
+			messageId: "message-id-en",
+			id: "variant-id-en-*",
+			match: {},
+			pattern: [{ type: "text", value: "{count} new messages" }],
+		},
+		{
+			messageId: "message-id-de",
+			id: "variant-id-de-*",
+			match: {},
+			pattern: [{ type: "text", value: "{count} neue Nachrichten" }],
+		},
+	],
 }

inlang/source-code/bundle-component/src/mock/pluralBundle.ts

@@ -0,0 +1,149 @@
+import type { Bundle, Message, Variant } from "@inlang/sdk2"
+
+export const examplePlural: {
+	bundles: Bundle[]
+	messages: Message[]
+	variants: Variant[]
+} = {
+	bundles: [
+		{
+			id: "mock_bundle_human_id",
+			declarations: [
+				{
+					type: "input-variable",
+					name: "numProducts",
+				},
+				{
+					type: "input-variable",
+					name: "count",
+				},
+				{
+					type: "input-variable",
+					name: "projectCount",
+				},
+			],
+		},
+	],
+	messages: [
+		{
+			bundleId: "mock_bundle_human_id",
+			id: "mock_message_id_de",
+			locale: "de",
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable-reference",
+						name: "numProducts",
+					},
+					annotation: {
+						type: "function-reference",
+						name: "plural",
+						options: [],
+					},
+				},
+			],
+		},
+		{
+			bundleId: "mock_bundle_human_id",
+			id: "mock_message_id_en",
+			locale: "en",
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable-reference",
+						name: "numProducts",
+					},
+					annotation: {
+						type: "function-reference",
+						name: "plural",
+						options: [],
+					},
+				},
+			],
+		},
+	],
+	variants: [
+		{
+			messageId: "mock_message_id_de",
+			id: "mock_variant_id_de_zero",
+			match: { numProducts: "zero" },
+			pattern: [
+				{
+					type: "text",
+					value: "Keine Produkte",
+				},
+			],
+		},
+		{
+			messageId: "mock_message_id_de",
+			id: "mock_variant_id_de_one",
+			match: { numProducts: "one" },
+			pattern: [
+				{
+					type: "text",
+					value: "Ein Produkt",
+				},
+			],
+		},
+		{
+			messageId: "mock_message_id_de",
+			id: "mock_variant_id_de_other",
+			match: { numProducts: "other" },
+			pattern: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable-reference",
+						name: "numProducts",
+					},
+				},
+				{
+					type: "text",
+					value: " Produkte",
+				},
+			],
+		},
+		{
+			messageId: "mock_message_id_en",
+			id: "mock_variant_id_en_zero",
+			match: { numProducts: "zero" },
+			pattern: [
+				{
+					type: "text",
+					value: "No Products",
+				},
+			],
+		},
+		{
+			messageId: "mock_message_id_en",
+			id: "mock_variant_id_en_one",
+			match: { numProducts: "one" },
+			pattern: [
+				{
+					type: "text",
+					value: "A product",
+				},
+			],
+		},
+		{
+			messageId: "mock_message_id_en",
+			id: "mock_variant_id_en_other",
+			match: { numProducts: "other" },
+			pattern: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable-reference",
+						name: "numProducts",
+					},
+				},
+				{
+					type: "text",
+					value: " products",
+				},
+			],
+		},
+	],
+}

inlang/source-code/bundle-component/src/stories/actions/add-input/inlang-add-input.mdx

@@ -11,7 +11,7 @@ The component is currently only used inside of the bundle. That means that it ca
 <Canvas of={InlangAddInput.Example} />
 
 #### Props:
-- `messages`: The messages as Message[] to get inputs
+- `bundle`: The bundle
 
 #### Event:
 - `change`: The component dispatches a change event that contains all necessary information.

inlang/source-code/bundle-component/src/stories/actions/add-input/inlang-add-input.stories.ts

@@ -1,8 +1,8 @@
-import { pluralBundle } from "@inlang/sdk2"
 import "./inlang-add-input.ts"
 import "./../../inlang-bundle.ts"
 import type { Meta, StoryObj } from "@storybook/web-components"
 import { html } from "lit"
+import { examplePlural } from "../../../mock/pluralBundle.ts"
 
 const meta: Meta = {
 	component: "inlang-add-input",
@@ -22,7 +22,7 @@ export const Example: StoryObj = {
 				}
 			</style>
 			<div class="container">
-				<inlang-add-input messages=${pluralBundle.messages}>Press me</inlang-add-input>
+				<inlang-add-input bundle=${examplePlural.bundles[0]}>Press me</inlang-add-input>
 			</div>`
 	},
 }

inlang/source-code/bundle-component/src/stories/actions/add-input/inlang-add-input.ts

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import { createChangeEvent } from "../../../helper/event.js"
-import type { Message } from "@inlang/sdk2"
+import type { Bundle } from "@inlang/sdk2"
 import { baseStyling } from "../../../styling/base.js"
 
 import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js"
@@ -69,8 +69,8 @@ export default class InlangAddInput extends LitElement {
 		`,
 	]
 
-	@property({ type: Array })
-	messages: Message[] | undefined
+	@property({ type: Object })
+	bundle: Bundle
 
 	//state
 	@state()
@@ -114,29 +114,22 @@ export default class InlangAddInput extends LitElement {
 							@keydown=${(e: KeyboardEvent) => {
 								if (e.key === "Enter") {
 									if (this._newInput && this._newInput.trim() !== "") {
-										for (const message of this.messages ?? []) {
-											const newMessage = structuredClone(message)
-
-											newMessage.declarations.push({
-												type: "input",
-												name: this._newInput!,
-												// value: {
-												// 	type: "expression",
-												// 	arg: {
-												// 		type: "variable",
-												// 		name: this._newInput!,
-												// 	},
-												// },
+										this.dispatchEvent(
+											createChangeEvent({
+												type: "Bundle",
+												operation: "update",
+												newData: {
+													...this.bundle,
+													declarations: [
+														...this.bundle.declarations,
+														{
+															name: this._newInput,
+															type: "input-variable",
+														},
+													],
+												},
 											})
-
-											this.dispatchEvent(
-												createChangeEvent({
-													type: "Message",
-													operation: "update",
-													newData: newMessage,
-												})
-											)
-										}
+										)
 									}
 
 									this._newInput = ""