sveltekit-ui 1.0.11 → 1.0.12

package/src/lib/client/astc_formatting/index.js

@@ -331,11 +331,11 @@ export function astc_to_markdown(astc) {
   return astc_element_to_markdown(astc)
 }
 
-export function get_variable_from_path(path, variables, loops) {
+export function get_variable_from_path(path, variables, defs) {
   if (Array.isArray(path)) {
     let combined_variables_loc = deep_copy({
       variables: variables,
-      loops: loops,
+      defs: defs,
     })
     for (let path_item of path) {
       if (Array.isArray(path_item)) {
@@ -350,13 +350,13 @@ export function get_variable_from_path(path, variables, loops) {
   return null
 }
 
-export function clean_variable_path(path, variables, loops) {
-  // eg. ['variables','dddd',['loops',0]] to ['variables','dddd',3]
+export function clean_variable_path(path, variables, defs) {
+  // eg. ['variables','dddd',['defs',0]] to ['variables','dddd',3]
   if (Array.isArray(path)) {
     let cleaned_path = []
     for (let path_item of path) {
       if (Array.isArray(path_item)) {
-        let sub_val_from_path = get_variable_from_path(path_item, variables, loops)
+        let sub_val_from_path = get_variable_from_path(path_item, variables, defs)
         cleaned_path.push(sub_val_from_path)
       } else {
         cleaned_path.push(path_item)
@@ -367,14 +367,14 @@ export function clean_variable_path(path, variables, loops) {
   return null
 }
 
-export function clean_attributes_from_variable_path(attributes, variables, loops) {
+export function clean_attributes_from_variable_path(attributes, variables, defs) {
   let cleaned_attributes = attributes
   if (Object.keys(attributes || {}).length) {
     for (let [att_key, att_val] of Object.entries(attributes)) {
       if (att_key.endsWith("_from_variable_path") && att_val != null) {
-        const clean_path = clean_variable_path(att_val, variables, loops)
+        const clean_path = clean_variable_path(att_val, variables, defs)
         const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-        cleaned_attributes[att_key_to_set] = get_variable_from_path(clean_path, variables, loops)
+        cleaned_attributes[att_key_to_set] = get_variable_from_path(clean_path, variables, defs)
         delete cleaned_attributes[att_key]
       }
     }
@@ -382,18 +382,18 @@ export function clean_attributes_from_variable_path(attributes, variables, loops
   return cleaned_attributes
 }
 
-export function astc_to_static_attributes(astc, variables, loops) {
+export function astc_to_static_attributes(astc, variables, defs) {
   if ([undefined, null].includes(astc)) {
     return null
   }
   let astc_loc = deep_copy(astc)
   if (Object.keys(astc_loc?.attributes || {}).length > 0) {
-    astc_loc.attributes = clean_attributes_from_variable_path(astc_loc?.attributes, variables, loops)
+    astc_loc.attributes = clean_attributes_from_variable_path(astc_loc?.attributes, variables, defs)
   }
   if (Array.isArray(astc_loc?.children)) {
     let cleaned_children = []
     for (let child of astc_loc.children) {
-      cleaned_children.push(astc_to_static_attributes(child, variables, loops))
+      cleaned_children.push(astc_to_static_attributes(child, variables, defs))
     }
     astc_loc.children = cleaned_children
   }
@@ -601,25 +601,6 @@ export function astc_to_email_html(astc, options, slots_html_and_text_body) {
   }
 }
 
-function increase_loops_on_path(path) {
-  let cleaned_path = null
-  if (Array.isArray(path)) {
-    cleaned_path = []
-    for (let path_item of path) {
-      if (Array.isArray(path_item)) {
-        if (path_item?.[0] == "loops" && typeof path_item?.[1] == "number") {
-          cleaned_path.push(["loops", path_item?.[1] + 1])
-        } else {
-          cleaned_path.push(increase_loops_on_path(path_item))
-        }
-      } else {
-        cleaned_path.push(path_item)
-      }
-    }
-  }
-  return cleaned_path
-}
-
 export function variables_data_type_remaining_to_astc(
   variables_data_type_remaining,
   preferred_content_use = "display",
@@ -795,15 +776,9 @@ export function variables_data_type_remaining_to_astc(
     })
   } else if (variables_data_type_remaining?.type == "array_uniform_literal") {
     if (preferred_content_use == "input") {
-      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-      leading_variable_path_children = [
-        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-        ["loops", 0],
-      ]
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use,
-        leading_variable_path_children
+        preferred_content_use
       )
       return astc_element("array_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
@@ -813,15 +788,9 @@ export function variables_data_type_remaining_to_astc(
     // if (preferred_content_type == "object") {
     //   // maybe infer as table
     // }
-    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-    leading_variable_path_children = [
-      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-      ["loops", 0],
-    ]
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use,
-      leading_variable_path_children
+      preferred_content_use
     )
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
@@ -840,30 +809,18 @@ export function variables_data_type_remaining_to_astc(
     // return astc_element("list", children)
   } else if (variables_data_type_remaining?.type == "object_uniform_literal") {
     if (preferred_content_use == "input") {
-      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-      leading_variable_path_children = [
-        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-        ["loops", 0],
-      ]
       const child_astc = variables_data_type_remaining_to_astc(
         variables_data_type_remaining?.items,
-        preferred_content_use,
-        leading_variable_path_children
+        preferred_content_use
       )
       return astc_element("object_uniform_input", [child_astc], {
         val_from_variable_path: leading_variable_path,
         ...(variables_data_type_remaining?.attributes ?? {}),
       })
     }
-    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
-    leading_variable_path_children = [
-      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
-      ["loops", 0],
-    ]
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use,
-      leading_variable_path_children
+      preferred_content_use
     )
     return astc_element("object_uniform", [child_astc], {
       val_from_variable_path: leading_variable_path,

package/src/lib/client/docs/index.js

@@ -2111,11 +2111,6 @@ export const definitions = {
         default: null,
         description: "external data object used by show_conditions or variable-based attributes",
       },
-      loops: {
-        type: "any",
-        default: null,
-        description: "tracks current iteration indexes when rendering loop nodes",
-      },
       mapkit_js_token: {
         type: "string",
         default: null,
@@ -2176,13 +2171,9 @@ export const definitions = {
         type: "object",
         description: "the processed content node with type, manager, and possible children",
       },
-      variables: {
+      definition_stack: {
         type: "any",
-        description: "the variables reference passed in config, potentially used by show_conditions or loops",
-      },
-      loops: {
-        type: "any",
-        description: "the current loop indexes used within array or object loops",
+        description: "the definition_stack variables reference passed in config, potentially used by show_conditions",
       },
     },
   },
@@ -2212,20 +2203,10 @@ export const definitions = {
         default: null,
         description: "callback invoked for certain child content manager events",
       },
-      variables: {
-        type: "any",
-        default: null,
-        description: "external variables object for show_conditions or other variable-based usage",
-      },
-      loops: {
-        type: "any",
-        default: null,
-        description: "loop iteration indexes used within array or object loops",
-      },
-      variables_data_type: {
+      definition_stack: {
         type: "any",
         default: null,
-        description: "optional data-type object used by attribute input fields (derived if null)",
+        description: "external definition_stack variables object for show_conditions or other variable-based usage",
       },
       mapkit_js_token: {
         type: "string",

package/src/lib/client/index.js

@@ -551,20 +551,32 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
-export function set_content_variables(input, variables_combined, pass_event_down) {
-  console.log("set_content_variables000", deep_copy({ input, variables_combined, pass_event_down }))
-  if (!Array.isArray(input?.variable_path_to_target)) {
+export function set_definition_stack(input, definition_stack, pass_event_down) {
+  console.log("set_definition_stack00", deep_copy({ input, definition_stack, pass_event_down }))
+  if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }
-  let content_variables_loc = deep_copy(variables_combined)
-  let temp = content_variables_loc
+  let defined_i = null
   const path = input.variable_path_to_target
+  const root_key = path[0]
+  for (let i = 0; i < definition_stack.length; i++) {
+    if (definition_stack?.[i].hasOwnProperty(root_key)) {
+      defined_i = i
+      break
+    }
+  }
+  if (defined_i == null) {
+    throw new Error("Root key not found in stack")
+  }
+  let defined_variables_loc = deep_copy(definition_stack[defined_i][root_key])
+  let temp = defined_variables_loc
   const last_key = path[path.length - 1]
-  for (let i = 0; i < path.length - 1; i++) {
+  for (let i = 1; i < path.length - 1; i++) {
     const key = path[i]
     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-      if (Number.isInteger(last_key)) {
-        temp[key] = Array(last_key).fill(null)
+      const next_key = path[i + 1]
+      if (Number.isInteger(next_key)) {
+        temp[key] = []
       } else {
         temp[key] = {}
       }
@@ -576,17 +588,26 @@ export function set_content_variables(input, variables_combined, pass_event_down
       if (
         typeof input?.index_to_insert_at === "number" &&
         input?.index_to_insert_at >= 0 &&
-        input?.index_to_insert_at <= temp?.[last_key].length
+        input?.index_to_insert_at <= temp[last_key].length
       ) {
         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
       } else {
         temp[last_key].push(input.value)
       }
+    } else if (Array.isArray(temp)) {
+      if (
+        typeof input?.index_to_insert_at === "number" &&
+        input?.index_to_insert_at >= 0 &&
+        input?.index_to_insert_at <= temp.length
+      ) {
+        temp.splice(input.index_to_insert_at, 0, input.value)
+      } else {
+        temp.push(input.value)
+      }
     } else {
       temp[last_key] = [input.value]
     }
   } else if (input?.type == "set_variables_delete") {
-    console.log("set_variables_delete", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
         temp.splice(last_key, 1)
@@ -595,7 +616,6 @@ export function set_content_variables(input, variables_combined, pass_event_down
       delete temp[last_key]
     }
   } else if (input?.type == "set_variables_key") {
-    console.log("set_variables_key", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       throw new Error("Cannot change key in array")
     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
@@ -607,107 +627,35 @@ export function set_content_variables(input, variables_combined, pass_event_down
   } else {
     temp[last_key] = input?.value
   }
-  console.log("vars_fin", content_variables_loc?.variables)
+  definition_stack[defined_i][root_key] = defined_variables_loc
+  console.log("defined_variables_loc112", defined_variables_loc)
+  console.log("vars_fin", deep_copy(definition_stack))
   if (typeof pass_event_down === "function") {
     pass_event_down({
       value: input.value,
-      variables: content_variables_loc?.variables,
+      definition_stack: definition_stack,
       set_from_content_id: input.set_from_content_id,
       variable_path_to_target: input.variable_path_to_target,
     })
   }
   return {
     is_success: true,
-    variables: content_variables_loc?.variables,
-  }
-}
-
-// export function set_content_variables(input, variables_combined, pass_event_down) {
-//   console.log("set_content_variables000", input)
-//   if (!Array.isArray(input?.variable_path_to_target)) {
-//     throw new Error("Path must be an array")
-//   }
-//   let content_variables_loc = deep_copy(variables_combined)
-//   let temp = content_variables_loc
-//   const path = input.variable_path_to_target
-//   const last_key = path[path.length - 1]
-//   for (let i = 0; i < path.length - 1; i++) {
-//     const key = path[i]
-//     const nextKey = path[i + 1]
-
-//     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-//       if (typeof nextKey === "number") {
-//         temp[key] = []
-//       } else {
-//         temp[key] = {}
-//       }
-//     }
-//     temp = temp[key]
-//   }
-//   if (input?.type == "set_variables_insert") {
-//     if (Array.isArray(temp[last_key])) {
-//       if (
-//         typeof input?.index_to_insert_at === "number" &&
-//         input?.index_to_insert_at >= 0 &&
-//         input?.index_to_insert_at <= temp?.[last_key].length
-//       ) {
-//         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
-//       } else {
-//         temp[last_key].push(input.value)
-//       }
-//     } else {
-//       temp[last_key] = [input.value]
-//     }
-//   } else if (input?.type == "set_variables_delete") {
-//     if (Array.isArray(temp)) {
-//       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
-//         temp.splice(last_key, 1)
-//       }
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       delete temp[last_key]
-//     }
-//   } else if (input?.type == "set_variables_key") {
-//     if (Array.isArray(temp)) {
-//       throw new Error("Cannot change key in array")
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       temp[input.value] = temp[last_key]
-//       delete temp[last_key]
-//     } else {
-//       throw new Error("Key not found in object")
-//     }
-//   } else {
-//     temp[last_key] = input?.value
-//   }
-//   if (typeof pass_event_down === "function") {
-//     pass_event_down({
-//       value: input.value,
-//       variables: content_variables_loc,
-//       set_from_content_id: input.set_from_content_id,
-//       variable_path_to_target: input.variable_path_to_target,
-//     })
-//   }
-//   return {
-//     is_success: true,
-//     variables: content_variables_loc,
-//   }
-// }
+    definition_stack: definition_stack,
+  }
+}
 
 // tbd could also turn into a typed thing with arrays of v or objects, color, etc
 export function v(config) {
   let val = $state(null)
-
   function on_change(from_id = null) {
     if (typeof config?.on_change == "function") {
       config?.on_change({ val, from_id: from_id })
     }
   }
-
   function init(config) {
     val = config?.val
   }
-
   init(config)
-
   return {
     get val() {
       return val

package/src/lib/client/types/index.js

@@ -1996,6 +1996,8 @@ export const content_types = {
         type: "variable_path_literal",
         allowed_types: ["array_uniform_literal", "object_uniform_literal"],
       },
+      iter_identifier: { type: "text_literal" },
+      join_text: { type: "text_literal" },
     },
     child_elements: {
       ...main_child_element_options,

package/src/lib/index.js

@@ -76,6 +76,8 @@ export { default as Popover } from "./Components/Popover/index.svelte"
 export { create_popover_manager } from "./Components/Popover/index.svelte.js"
 export { default as TableAdvanced } from "./Components/TableAdvanced/index.svelte"
 export { create_table_advanced_manager } from "./Components/TableAdvanced/index.svelte.js"
+export { default as VariablePathInput } from "./Components/VariablePathInput/index.svelte"
+export { create_variable_path_input_manager } from "./Components/VariablePathInput/index.svelte.js"
 export { default as Spacer } from "./Components/Spacer/index.svelte"
 export { default as TransparentBackground } from "./Components/TransparentBackground/index.svelte"
 export { default as XFollow } from "./Components/XFollow/index.svelte"

package/src/routes/[component]/Showcase/Content/index.svelte

@@ -1,7 +1,8 @@
 <script>
-  import ContentDisplay from "$lib/Components/Content/index.svelte"
+  import Content from "$lib/Components/Content/index.svelte"
   import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
   import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+  import { deep_copy, set_definition_stack } from "$lib/client/index.js"
 
   const val = {
     type_id: "div",
@@ -37,108 +38,73 @@
         attributes: {},
       },
       {
-        type_id: "table",
-        selector_id: "table_qktny",
+        type_id: "checkbox",
+        selector_id: "kdotcril",
+        children: [],
+        attributes: { val_from_variable_path: ["variables", "cccc"], type: "checkbox", size: null, color: null },
+      },
+      {
+        type_id: "loop",
+        selector_id: "bwrgl",
         children: [
           {
-            type_id: "thead",
-            selector_id: "thead_zcdil",
+            type_id: "h5",
+            selector_id: "clrzp",
             children: [
               {
-                type_id: "tr",
-                selector_id: "tr_rzjyi",
-                children: [
-                  {
-                    type_id: "th",
-                    selector_id: "th_pcocw",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_jbdbr",
-                        children: [],
-                        attributes: { content: "You can make tables" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    type_id: "td",
-                    selector_id: "td_kcizj",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_wyfea",
-                        children: [],
-                        attributes: { content: "yes indeed" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
+                type_id: "base_text",
+                selector_id: "zsaou",
+                children: [],
+                attributes: {
+                  content_from_variable_path: ["variables", "stuff", ["booly_i"]],
+                  text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
+                },
               },
             ],
             attributes: {},
           },
           {
-            type_id: "tbody",
-            selector_id: "tbody_yoiis",
-            children: [
-              {
-                type_id: "tr",
-                selector_id: "tr_vazwy",
-                children: [
-                  {
-                    type_id: "th",
-                    selector_id: "th_hegat",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_jbxot",
-                        children: [],
-                        attributes: { content: "and other stuff" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    type_id: "td",
-                    selector_id: "td_egqxj",
-                    children: [
-                      {
-                        type_id: "base_text",
-                        selector_id: "base_text_urtfy",
-                        children: [],
-                        attributes: { content: "certainly" },
-                      },
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
+            type_id: "checkbox",
+            selector_id: "lqvon",
+            children: [],
+            attributes: {
+              val_from_variable_path: ["variables", "stuff", ["booly_i"]],
+              size: 2.4,
+              type: "checkbox",
+              label: null,
+              name: null,
+            },
           },
         ],
-        attributes: { caption: null },
-      },
-      {
-        type_id: "code",
-        selector_id: "code_mhlkk",
-        children: [],
-        attributes: { content: "Code blocks and more222", language: null },
+        attributes: { iter_identifier: "booly_i", val_from_variable_path: ["variables", "stuff"], join_text: null },
       },
     ],
     attributes: {},
   }
 
-  let content_manager = create_content_manager({ val })
+  let variables = $state({
+    cccc: false,
+    stuff: [false, true, false],
+  })
+
+  let content_manager = create_content_manager({
+    val,
+    definition_stack: [{ variables }],
+    // on_event: (input) => console.log("on_event", input),
+    on_event: (input) => {
+      console.log("on_event00", input)
+      const res = set_definition_stack(input, [{ variables: variables }], content_manager.pass_event_down)
+      variables = res?.definition_stack?.[0]?.variables
+      console.log("on_event01", res?.definition_stack)
+      return res
+    },
+  })
 </script>
 
+<pre>{JSON.stringify(variables, null, 2)}</pre>
 <div>
   <div style="max-width: 65rem; margin: auto;">
     <h4>Example</h4>
-    <ContentDisplay manager={content_manager} />
+    <Content manager={content_manager} />
   </div>
 </div>

package/src/routes/[component]/Showcase/ContentInput/index.svelte

@@ -7,7 +7,7 @@
   import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
   import DataTypeInput from "$lib/Components/DataTypeInput/index.svelte"
   // import { create_data_type_input_manager } from "$lib/Components/DataTypeInput/index.svelte.js"
-  import { deep_copy, set_content_variables } from "$lib/client/index.js"
+  import { deep_copy, set_definition_stack } from "$lib/client/index.js"
   import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
 
   const content_variables_initial = {
@@ -258,7 +258,7 @@
                 selector_id: "zsaou",
                 children: [],
                 attributes: {
-                  content_from_variable_path: ["variables", "dddd", ["loops", 0]],
+                  content_from_variable_path: ["variables", "dddd", ["booly_i"]],
                   text_color: { l: 15, c: 13, h: 6, o: 24, is_dark_theme_invert: true },
                 },
               },
@@ -270,15 +270,14 @@
             selector_id: "lqvon",
             children: [],
             attributes: {
-              val_from_variable_path: ["variables", "dddd", ["loops", 0]],
-              size: 2.4,
+              val_from_variable_path: ["variables", "dddd", ["booly_i"]],
               type: "checkbox",
-              label: null,
-              name: null,
+              size: 2.4,
+              color: null,
             },
           },
         ],
-        attributes: { val_from_variable_path: ["variables", "dddd"] },
+        attributes: { iter_identifier: "booly_i", val_from_variable_path: ["variables", "dddd"], join_text: null },
       },
       {
         type_id: "show_conditions",
@@ -330,17 +329,16 @@
     // storage: account_storage,
     storage_default_folder_path: ["pages"],
     mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
-    // variables_data_type: () => data_type_input_manager?.val,
-    variables: () => variables_json_manager?.val,
+    definition_stack: [{ variables: variables_json_manager?.val }],
     on_event: (input) => {
       console.log("on_event00", input)
-      const res = set_content_variables(
+      const res = set_definition_stack(
         input,
-        { variables: variables_json_manager?.val },
+        [{ variables: variables_json_manager?.val }],
         content_input_manager.pass_event_down
       )
-      variables_json_manager.set_val(res?.variables)
-      console.log("on_event01", res?.variables)
+      variables_json_manager.set_val(res?.definition_stack)
+      console.log("on_event01", res?.definition_stack)
       return res
     },
   })