@salla.sa/twilight-bundles 0.1.30 → 0.1.32

package/bin/tw-init.js

@@ -44,7 +44,7 @@ function installStarterKit(projectRoot) {
   return new Promise((resolve) => {
     try {
       console.log('📦 Installing @salla.sa/twilight-bundles-starter-kit...');
-      
+
       // Check if pnpm exists on the system
       try {
         execSync('pnpm --version', { stdio: 'ignore' });
@@ -55,10 +55,10 @@ function installStarterKit(projectRoot) {
         resolve(false);
         return;
       }
-      
+
       // Install the package using pnpm
       const installCommand = 'pnpm add @salla.sa/twilight-bundles-starter-kit@latest';
-      
+
       console.log(`📦 Running: ${installCommand}`);
       console.log('⚠️ This may take a moment...');
       try {
@@ -84,10 +84,10 @@ function installStarterKit(projectRoot) {
 function copyStarterKitFiles(projectRoot) {
   try {
     console.log('📋 Copying starter-kit files to your project...');
-    
+
     // Get the path to the starter-kit package
     const starterKitPath = path.join(projectRoot, 'node_modules', '@salla.sa', 'twilight-bundles-starter-kit');
-    
+
     // Files and directories to copy
     const itemsToCopy = [
       'src',
@@ -96,18 +96,25 @@ function copyStarterKitFiles(projectRoot) {
       'vite.config.ts',
       'README.md'
     ];
-    
+
     // Copy each item
     for (const item of itemsToCopy) {
       const sourcePath = path.join(starterKitPath, item);
       const targetPath = path.join(projectRoot, item);
-      
+      const isExist = fs.existsSync(targetPath);
+
+      if (isExist && item === 'twilight-bundle.json') {
+        console.log(`⚠️ ${item} already exists, merging...`);
+        mergeTwilightBundleJson(sourcePath, targetPath);
+        continue;
+      }
+
       // Skip if target already exists
-      if (fs.existsSync(targetPath)) {
+      if (isExist) {
         console.log(`⚠️ ${item} already exists, skipping...`);
         continue;
       }
-      
+
       // Copy directory recursively
       if (fs.statSync(sourcePath).isDirectory()) {
         copyDirectoryRecursive(sourcePath, targetPath);
@@ -115,10 +122,10 @@ function copyStarterKitFiles(projectRoot) {
         // Copy file
         fs.copyFileSync(sourcePath, targetPath);
       }
-      
+
       console.log(`✅ Copied ${item}`);
     }
-    
+
     return true;
   } catch (error) {
     console.error('❌ Failed to copy starter-kit files:', error.message);
@@ -136,15 +143,15 @@ function copyDirectoryRecursive(source, target) {
   if (!fs.existsSync(target)) {
     fs.mkdirSync(target, { recursive: true });
   }
-  
+
   // Get all items in the source directory
   const items = fs.readdirSync(source);
-  
+
   // Copy each item
   for (const item of items) {
     const sourcePath = path.join(source, item);
     const targetPath = path.join(target, item);
-    
+
     // Copy directory recursively or file directly
     if (fs.statSync(sourcePath).isDirectory()) {
       copyDirectoryRecursive(sourcePath, targetPath);
@@ -162,23 +169,23 @@ function copyDirectoryRecursive(source, target) {
 function mergePackageJson(projectRoot) {
   try {
     console.log('🔄 Merging package.json...');
-    
+
     // Get the path to the starter-kit package.json
     const starterKitPackageJsonPath = path.join(
-      projectRoot, 
-      'node_modules', 
-      '@salla.sa', 
-      'twilight-bundles-starter-kit', 
+      projectRoot,
+      'node_modules',
+      '@salla.sa',
+      'twilight-bundles-starter-kit',
       'package.json'
     );
-    
+
     // Get the path to the current package.json
     const currentPackageJsonPath = path.join(projectRoot, 'package.json');
-    
+
     // Read the package.json files
     const starterKitPackageJson = JSON.parse(fs.readFileSync(starterKitPackageJsonPath, 'utf8'));
     const currentPackageJson = JSON.parse(fs.readFileSync(currentPackageJsonPath, 'utf8'));
-    
+
     // Merge the package.json files
     const mergedPackageJson = {
       ...currentPackageJson,
@@ -196,13 +203,13 @@ function mergePackageJson(projectRoot) {
         ...currentPackageJson.devDependencies
       }
     };
-    
+
     // Write the merged package.json
     fs.writeFileSync(
-      currentPackageJsonPath, 
+      currentPackageJsonPath,
       JSON.stringify(mergedPackageJson, null, 2)
     );
-    
+
     console.log('✅ package.json merged successfully');
     return true;
   } catch (error) {
@@ -211,6 +218,35 @@ function mergePackageJson(projectRoot) {
   }
 }
 
+function mergeTwilightBundleJson(sourcePath, targetPath) {
+  try {
+    console.log('🔄 Merging twilight-bundle.json...');
+
+    // Read the twilight-bundle.json files
+    const currentTwilightBundleJson = JSON.parse(fs.readFileSync(targetPath, 'utf8'));
+    const starterKitTwilightBundleComponents = JSON.parse(fs.readFileSync(sourcePath, 'utf8')).components||[];
+    const currentComponents = currentTwilightBundleJson.components?.map((component) => component.name)||[];
+
+    starterKitTwilightBundleComponents.forEach((component) => {
+      if (!currentComponents.includes(component.name)) {
+        currentTwilightBundleJson.components.push(component);
+      }
+    });
+
+    // Write the merged twilight-bundle.json
+    fs.writeFileSync(
+      targetPath,
+      JSON.stringify(currentTwilightBundleJson, null, 2)
+    );
+
+    console.log('✅ twilight-bundle.json merged successfully');
+    return true;
+  } catch (error) {
+    console.error('❌ Failed to merge twilight-bundle.json:', error.message);
+    return false;
+  }
+}
+
 /**
  * Initialize a new Twilight Bundles project
  * @param {string} [projectRootArg] - Optional project root directory
@@ -218,19 +254,19 @@ function mergePackageJson(projectRoot) {
 async function initTwilightBundles(projectRootArg) {
   // Get project root from arguments or default to current directory
   const projectRoot = projectRootArg || process.cwd();
-  
+
   console.log('🚀 Initializing Salla Twilight Bundles Project 🚀\n');
-  
+
   // Check if twilight-bundle.json already exists
   if (twilightBundlesExists(projectRoot)) {
     console.log('⚠️ This directory already contains a Twilight Bundles project (twilight-bundle.json exists)');
-    console.log('If you want to start a new project, please create a new directory and run this command again, or if want new component run `pnpm tw-component`.');
-    return false;
+    //console.log('If you want to start a new project, please create a new directory and run this command again, or if want new component run `pnpm tw-component`.');
+    //return false;
   }
-  
+
   // Check if starter-kit is installed
   let starterKitReady = starterKitInstalled(projectRoot);
-  
+
   // Install starter-kit if not installed
   if (!starterKitReady) {
     starterKitReady = await installStarterKit(projectRoot);
@@ -238,71 +274,71 @@ async function initTwilightBundles(projectRootArg) {
       return false;
     }
   }
-  
+
   // Copy starter-kit files
   if (!copyStarterKitFiles(projectRoot)) {
     return false;
   }
-  
+
   // Merge package.json
   if (!mergePackageJson(projectRoot)) {
     return false;
   }
-  
+
   console.log('\n🎉 Twilight Bundles project initialized successfully!\n');
-  
+
   console.log('Installing dependencies...');
-  execSync('pnpm install',  { stdio: 'inherit' });
+  execSync('pnpm install', { stdio: 'inherit' });
 
   console.log('\nStarting development server...\n');
-  
+
   // Start dev server asynchronously so it doesn't block
   const devServer = spawn('pnpm', ['run', 'dev'], {
     stdio: 'inherit',
     cwd: projectRoot,
     shell: true
   });
-  
+
   // Wait a moment for the server to start outputting
   await new Promise(resolve => setTimeout(resolve, 3000));
-  
+
   // Show the helpful message while the server is running
   console.log('\n' + '='.repeat(60));
   console.log('🎯 Next Steps & Quick Tips');
   console.log('='.repeat(60) + '\n');
-  
+
   console.log('🔧 Development Commands:');
   console.log('   • pnpm dev       - Start development server with hot reload');
   console.log('   • pnpm build     - Build bundles for production');
-  
+
   console.log('📚 Documentation:');
   console.log('   • README.md          - Project overview and setup');
   console.log('   • src/               - Your bundle components');
   console.log('   • twilight-bundle.json - Bundle configuration\n');
-  
+
   console.log('💡 Pro Tips:');
   console.log('   • Edit files in src/ to see changes instantly');
   console.log('   • Check twilight-bundle.json for bundle settings');
   console.log('   • Use TypeScript for better type safety\n');
-  
+
   console.log('📝 Keyboard Shortcuts (in dev mode):');
   console.log('   • q + Enter          - Quit the dev server safely');
   console.log('   • r + Enter          - Restart the dev server');
   console.log('   • o + Enter          - Open in browser');
   console.log('   • Ctrl+C             - Force Stop the development server\n');
-  
+
   console.log('📦 Component Management:');
   console.log('   pnpm tw-create-component <component-name>  - Create a new component');
   console.log('   pnpm tw-delete-component <component-name>  - Delete a component');
   console.log('   Example: pnpm tw-create-component tw-my-button\n');
-  
+
   // Handle server exit
   devServer.on('exit', (code) => {
     if (code !== 0 && code !== null) {
       //console.log(`\n⚠️ Development server exited with code ${code}`);
     }
   });
-  
+
   return true;
 }
 

package/dist/twilight-bundles.cjs

@@ -6,7 +6,7 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:$t,defineProperty:ft,getOwnPropertyDescriptor:gt,getOwnPropertyNames:_t,getOwnPropertySymbols:yt,getPrototypeOf:At}=Object,f=globalThis,X=f.trustedTypes,St=X?X.emptyScript:"",L=f.reactiveElementPolyfillSupport,P=(n,t)=>n,k={toAttribute(n,t){switch(t){case Boolean:n=n?St:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},K=(n,t)=>!$t(n,t),Y={attribute:!0,type:String,converter:k,reflect:!1,useDefault:!1,hasChanged:K};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),f.litPropertyMetadata??(f.litPropertyMetadata=new WeakMap);class w extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=Y){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&ft(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:r}=gt(this.prototype,t)??{get(){return this[e]},set(o){this[e]=o}};return{get:i,set(o){const l=i==null?void 0:i.call(this);r==null||r.call(this,o),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??Y}static _$Ei(){if(this.hasOwnProperty(P("elementProperties")))return;const t=At(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(P("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(P("properties"))){const e=this.properties,s=[..._t(e),...yt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(Q(i))}else t!==void 0&&e.push(Q(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return mt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var r;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const o=(((r=s.converter)==null?void 0:r.toAttribute)!==void 0?s.converter:k).toAttribute(e,s.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null}}_$AK(t,e){var r,o;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((r=l.converter)==null?void 0:r.fromAttribute)!==void 0?l.converter:k;this._$Em=i;const c=a.fromAttribute(e,l.type);this[i]=c??((o=this._$Ej)==null?void 0:o.get(i))??c,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const r=this.constructor,o=this[t];if(s??(s=r.getPropertyOptions(t)),!((s.hasChanged??K)(o,e)||s.useDefault&&s.reflect&&o===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(r._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:r},o){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,o??e??this[t]),r!==!0||o!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[r,o]of i){const{wrapped:l}=o,a=this[r];l!==!0||this._$AL.has(r)||a===void 0||this.C(r,void 0,o,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var r;return(r=i.hostUpdate)==null?void 0:r.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}}w.elementStyles=[],w.shadowRootOptions={mode:"open"},w[P("elementProperties")]=new Map,w[P("finalized")]=new Map,L==null||L({ReactiveElement:w}),(f.reactiveElementVersions??(f.reactiveElementVersions=[])).push("2.1.1");/**
+ */const{is:$t,defineProperty:ft,getOwnPropertyDescriptor:gt,getOwnPropertyNames:_t,getOwnPropertySymbols:yt,getPrototypeOf:At}=Object,f=globalThis,X=f.trustedTypes,St=X?X.emptyScript:"",I=f.reactiveElementPolyfillSupport,P=(n,t)=>n,k={toAttribute(n,t){switch(t){case Boolean:n=n?St:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},K=(n,t)=>!$t(n,t),Y={attribute:!0,type:String,converter:k,reflect:!1,useDefault:!1,hasChanged:K};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),f.litPropertyMetadata??(f.litPropertyMetadata=new WeakMap);class w extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=Y){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&ft(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:r}=gt(this.prototype,t)??{get(){return this[e]},set(o){this[e]=o}};return{get:i,set(o){const l=i==null?void 0:i.call(this);r==null||r.call(this,o),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??Y}static _$Ei(){if(this.hasOwnProperty(P("elementProperties")))return;const t=At(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(P("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(P("properties"))){const e=this.properties,s=[..._t(e),...yt(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(Q(i))}else t!==void 0&&e.push(Q(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach((e=>e(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return mt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)}))}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach((e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var r;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const o=(((r=s.converter)==null?void 0:r.toAttribute)!==void 0?s.converter:k).toAttribute(e,s.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null}}_$AK(t,e){var r,o;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const l=s.getPropertyOptions(i),a=typeof l.converter=="function"?{fromAttribute:l.converter}:((r=l.converter)==null?void 0:r.fromAttribute)!==void 0?l.converter:k;this._$Em=i;const c=a.fromAttribute(e,l.type);this[i]=c??((o=this._$Ej)==null?void 0:o.get(i))??c,this._$Em=null}}requestUpdate(t,e,s){var i;if(t!==void 0){const r=this.constructor,o=this[t];if(s??(s=r.getPropertyOptions(t)),!((s.hasChanged??K)(o,e)||s.useDefault&&s.reflect&&o===((i=this._$Ej)==null?void 0:i.get(t))&&!this.hasAttribute(r._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:r},o){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,o??e??this[t]),r!==!0||o!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[r,o]of i){const{wrapped:l}=o,a=this[r];l!==!0||this._$AL.has(r)||a===void 0||this.C(r,void 0,o,a)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach((i=>{var r;return(r=i.hostUpdate)==null?void 0:r.call(i)})),this.update(e)):this._$EM()}catch(i){throw t=!1,this._$EM(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach((s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((e=>this._$ET(e,this[e])))),this._$EM()}updated(t){}firstUpdated(t){}}w.elementStyles=[],w.shadowRootOptions={mode:"open"},w[P("elementProperties")]=new Map,w[P("finalized")]=new Map,I==null||I({ReactiveElement:w}),(f.reactiveElementVersions??(f.reactiveElementVersions=[])).push("2.1.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -20,4 +20,4 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Ut={attribute:!0,type:String,converter:k,reflect:!1,hasChanged:K},Ot=(n=Ut,t,e)=>{const{kind:s,metadata:i}=e;let r=globalThis.litPropertyMetadata.get(i);if(r===void 0&&globalThis.litPropertyMetadata.set(i,r=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),r.set(e.name,n),s==="accessor"){const{name:o}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(o,a,n)},init(l){return l!==void 0&&this.C(o,void 0,n,l),l}}}if(s==="setter"){const{name:o}=e;return function(l){const a=this[o];t.call(this,l),this.requestUpdate(o,a,n)}}throw Error("Unsupported decorator location: "+s)};function z(n){return(t,e)=>typeof e=="object"?Ot(n,t,e):((s,i,r)=>{const o=i.hasOwnProperty(r);return i.constructor.createProperty(r,s),o?Object.getOwnPropertyDescriptor(i,r):void 0})(n,t,e)}class y{static onBundlesReady(){return y.makeSureSallaIsReady().then(()=>Salla.event.onlyWhen("twilight-bundles::initiated"))}static async initializeSalla(){if(Salla.status==="ready"){salla.log("Salla is ready");return}const t=document.currentScript||document.querySelector('script[src*="twilight-bundles.js"]'),e=t==null?void 0:t.hasAttribute("demo-mode");let s=t==null?void 0:t.getAttribute("store-id"),i=JSON.parse((t==null?void 0:t.getAttribute("config"))||"false");return e||i||s?(s=s||"1510890315",i=i||await y.getStoreSettings(s),Salla.init(i||{debug:!0,store:{id:s}})):Salla.onReady()}static async getStoreSettings(t){let e=Salla.storage.session.get(`store-settings-${t}`);return e||(e=(await fetch("https://api.salla.dev/store/v1/store/settings",{headers:{"store-identifier":t}}).then(s=>s.json())).data,Salla.storage.session.set(`store-settings-${t}`,e),e)}static makeSureSallaIsReady(){return window.Salla?Promise.resolve(y.initializeSalla()):new Promise((t,e)=>{let s;const i=setTimeout(()=>{window.clearInterval(s),e(new Error("Timeout: Salla object not found after 10 seconds"))},1e4);s=window.setInterval(()=>{window.Salla&&(window.clearInterval(s),clearTimeout(i),t(y.initializeSalla()))},50)})}}var Rt=Object.defineProperty,I=(n,t,e,s)=>{for(var i=void 0,r=n.length-1,o;r>=0;r--)(o=n[r])&&(i=o(t,e,i)||i);return i&&Rt(t,e,i),i};const F=class F extends M{constructor(){super(...arguments),this.key="",this.data={},this.imports={},this.shadowRootMode="open"}createRenderRoot(){return this.shadowRootMode!==!1?this.attachShadow({mode:this.shadowRootMode||"closed"}):this}static register(t){const e={component:this,dynamicTagName:`${t}-${Math.random().toString(36).substring(2,8)}`};return y.onBundlesReady().then(()=>Salla.bundles.registerComponent(t,e))}};F.styles=pt`:host { display: block; }`;let v=F;I([z()],v.prototype,"key");I([z()],v.prototype,"data");I([z()],v.prototype,"imports");I([z()],v.prototype,"shadowRootMode");class Ht extends HTMLElement{connectedCallback(){var e;let t=(e=this.getAttribute("component-name"))==null?void 0:e.replace(/^salla-/,"");if(!t)return Salla.error("Component name is required",this),Promise.resolve();this.innerHTML=`<!-- Loading ${t} -->`,this.removeAttribute("component-name"),Salla.bundles.renderCustomComponentDom(`salla-${t}`,this)}}class Nt{constructor(){this.components=new Map,this.pendingComponents=[],this.initialized=!1,Salla.onReady().then(()=>{if(Salla.bundles){Salla.log("TwilightBundles is already initialized");return}this.init(),Salla.bundles=this,Salla.event.emit("twilight-bundles::initiated"),this.registerCustomComponents()})}async init(){this.initialized||(this.initialized=!0)}registerCustomComponents(){var t;HTMLElement.registerSallaComponent=function(e){Salla.bundles.registerComponent(e,{component:this,dynamicTagName:`${e}-${Math.random().toString(36).substring(2,8)}`})},(t=window.customComponents)==null||t.forEach(e=>{const s=document.createElement("script");s.type="module",s.src=e,document.head.appendChild(s)})}renderCustomComponentDom(t,e){salla.log("Rendering custom component",t),e.getAttribute("component-name");const s=this.components.get(t);return s?this.renderDynamicCustomComponentDom(s.dynamicTagName,e):this.pendingComponents.push({tagName:t,component:e})}renderDynamicCustomComponentDom(t,e){const s=document.createElement(t);Array.from(e.attributes).forEach(i=>s.setAttribute(i.name,i.value||"")),e.before(s),e.remove()}registerComponent(t,e){if(this.components.has(t))return console.warn(`Component ${t} is already registered into the this.components map. Skipping.`);if(!e.dynamicTagName)return console.warn(`Component ${t} is missing dynamicTagName. Skipping.`);if(!e.component)return console.warn(`Component ${t} is missing component. Skipping.`);if(window.customElements.get(e.dynamicTagName))return console.warn(`Component ${e.dynamicTagName} is already registered into the window custom elements. Skipping.`);window.customElements.define(e.dynamicTagName,e.component),this.components.set(t,e),Salla.log("Component registered:",e.dynamicTagName);const s=this.pendingComponents.filter(i=>i.tagName===t);s.length&&(s.forEach(i=>{this.renderDynamicCustomComponentDom(e.dynamicTagName,i.component)}),this.pendingComponents=this.pendingComponents.filter(i=>i.tagName!==t),Salla.log("Pending Components rendered:",t,e.dynamicTagName))}renderSharedAssests(...t){const e={sallaicons:`<link rel="stylesheet" href="${Salla.url.cdn("fonts/sallaicons.css")}">`};return t.map(s=>e[s]||"").join("")}}y.makeSureSallaIsReady().then(()=>new Nt).then(()=>window.customElements.get("salla-custom-component")||window.customElements.define("salla-custom-component",Ht));exports.SallaComponent=v;
+ */const Ut={attribute:!0,type:String,converter:k,reflect:!1,hasChanged:K},Ot=(n=Ut,t,e)=>{const{kind:s,metadata:i}=e;let r=globalThis.litPropertyMetadata.get(i);if(r===void 0&&globalThis.litPropertyMetadata.set(i,r=new Map),s==="setter"&&((n=Object.create(n)).wrapped=!0),r.set(e.name,n),s==="accessor"){const{name:o}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(o,a,n)},init(l){return l!==void 0&&this.C(o,void 0,n,l),l}}}if(s==="setter"){const{name:o}=e;return function(l){const a=this[o];t.call(this,l),this.requestUpdate(o,a,n)}}throw Error("Unsupported decorator location: "+s)};function z(n){return(t,e)=>typeof e=="object"?Ot(n,t,e):((s,i,r)=>{const o=i.hasOwnProperty(r);return i.constructor.createProperty(r,s),o?Object.getOwnPropertyDescriptor(i,r):void 0})(n,t,e)}class y{static onBundlesReady(){return y.makeSureSallaIsReady().then(()=>Salla.event.onlyWhen("twilight-bundles::initiated")).then(()=>Salla.lang.onLoaded())}static async initializeSalla(){if(Salla.status==="ready"){salla.log("Salla is ready");return}const t=document.currentScript||document.querySelector('script[src*="twilight-bundles.js"]'),e=t==null?void 0:t.hasAttribute("demo-mode");let s=t==null?void 0:t.getAttribute("store-id"),i=JSON.parse((t==null?void 0:t.getAttribute("config"))||"false");return e||i||s?(s=s||"1510890315",i=i||await y.getStoreSettings(s),Salla.init(i||{debug:!0,store:{id:s}})):Salla.onReady()}static async getStoreSettings(t){let e=Salla.storage.session.get(`store-settings-${t}`);return e||(e=(await fetch("https://api.salla.dev/store/v1/store/settings",{headers:{"store-identifier":t}}).then(s=>s.json())).data,Salla.storage.session.set(`store-settings-${t}`,e),e)}static makeSureSallaIsReady(){return window.Salla?Promise.resolve(y.initializeSalla()):new Promise((t,e)=>{let s;const i=setTimeout(()=>{window.clearInterval(s),e(new Error("Timeout: Salla object not found after 10 seconds"))},1e4);s=window.setInterval(()=>{window.Salla&&(window.clearInterval(s),clearTimeout(i),t(y.initializeSalla()))},50)})}}var Rt=Object.defineProperty,L=(n,t,e,s)=>{for(var i=void 0,r=n.length-1,o;r>=0;r--)(o=n[r])&&(i=o(t,e,i)||i);return i&&Rt(t,e,i),i};const F=class F extends M{constructor(){super(...arguments),this.key="",this.data={},this.imports={},this.shadowRootMode="open"}createRenderRoot(){return this.shadowRootMode!==!1?this.attachShadow({mode:this.shadowRootMode||"closed"}):this}static register(t){const e={component:this,dynamicTagName:`${t}-${Math.random().toString(36).substring(2,8)}`};return y.onBundlesReady().then(()=>Salla.bundles.registerComponent(t,e))}};F.styles=pt`:host { display: block; }`;let v=F;L([z()],v.prototype,"key");L([z()],v.prototype,"data");L([z()],v.prototype,"imports");L([z()],v.prototype,"shadowRootMode");class Ht extends HTMLElement{connectedCallback(){var e;let t=(e=this.getAttribute("component-name"))==null?void 0:e.replace(/^salla-/,"");if(!t)return Salla.error("Component name is required",this),Promise.resolve();this.innerHTML=`<!-- Loading ${t} -->`,this.removeAttribute("component-name"),Salla.bundles.renderCustomComponentDom(`salla-${t}`,this)}}class Nt{constructor(){this.components=new Map,this.pendingComponents=[],this.initialized=!1,Salla.onReady().then(()=>{if(Salla.bundles){Salla.log("TwilightBundles is already initialized");return}this.init(),Salla.bundles=this,Salla.event.emit("twilight-bundles::initiated"),this.registerCustomComponents()})}async init(){this.initialized||(this.initialized=!0)}registerCustomComponents(){var t;HTMLElement.registerSallaComponent=function(e){Salla.bundles.registerComponent(e,{component:this,dynamicTagName:`${e}-${Math.random().toString(36).substring(2,8)}`})},(t=window.customComponents)==null||t.forEach(e=>{const s=document.createElement("script");s.type="module",s.src=e,document.head.appendChild(s)})}renderCustomComponentDom(t,e){salla.log("Rendering custom component",t),e.getAttribute("component-name");const s=this.components.get(t);return s?this.renderDynamicCustomComponentDom(s.dynamicTagName,e):this.pendingComponents.push({tagName:t,component:e})}renderDynamicCustomComponentDom(t,e){const s=document.createElement(t);Array.from(e.attributes).forEach(i=>s.setAttribute(i.name,i.value||"")),e.before(s),e.remove()}registerComponent(t,e){if(this.components.has(t))return console.warn(`Component ${t} is already registered into the this.components map. Skipping.`);if(!e.dynamicTagName)return console.warn(`Component ${t} is missing dynamicTagName. Skipping.`);if(!e.component)return console.warn(`Component ${t} is missing component. Skipping.`);if(window.customElements.get(e.dynamicTagName))return console.warn(`Component ${e.dynamicTagName} is already registered into the window custom elements. Skipping.`);window.customElements.define(e.dynamicTagName,e.component),this.components.set(t,e),Salla.log("Component registered:",e.dynamicTagName);const s=this.pendingComponents.filter(i=>i.tagName===t);s.length&&(s.forEach(i=>{this.renderDynamicCustomComponentDom(e.dynamicTagName,i.component)}),this.pendingComponents=this.pendingComponents.filter(i=>i.tagName!==t),Salla.log("Pending Components rendered:",t,e.dynamicTagName))}renderSharedAssests(...t){const e={sallaicons:`<link rel="stylesheet" href="${Salla.url.cdn("fonts/sallaicons.css")}">`};return t.map(s=>e[s]||"").join("")}}y.makeSureSallaIsReady().then(()=>new Nt).then(()=>window.customElements.get("salla-custom-component")||window.customElements.define("salla-custom-component",Ht));exports.SallaComponent=v;

package/dist/twilight-bundles.js

@@ -45,7 +45,7 @@ const ut = (n) => new at(typeof n == "string" ? n : n + "", void 0, J), pt = (n,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: $t, defineProperty: ft, getOwnPropertyDescriptor: gt, getOwnPropertyNames: _t, getOwnPropertySymbols: yt, getPrototypeOf: At } = Object, f = globalThis, X = f.trustedTypes, St = X ? X.emptyScript : "", L = f.reactiveElementPolyfillSupport, P = (n, t) => n, k = { toAttribute(n, t) {
+const { is: $t, defineProperty: ft, getOwnPropertyDescriptor: gt, getOwnPropertyNames: _t, getOwnPropertySymbols: yt, getPrototypeOf: At } = Object, f = globalThis, X = f.trustedTypes, St = X ? X.emptyScript : "", I = f.reactiveElementPolyfillSupport, P = (n, t) => n, k = { toAttribute(n, t) {
   switch (t) {
     case Boolean:
       n = n ? St : null;
@@ -278,7 +278,7 @@ class v extends HTMLElement {
   firstUpdated(t) {
   }
 }
-v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[P("elementProperties")] = /* @__PURE__ */ new Map(), v[P("finalized")] = /* @__PURE__ */ new Map(), L == null || L({ ReactiveElement: v }), (f.reactiveElementVersions ?? (f.reactiveElementVersions = [])).push("2.1.1");
+v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[P("elementProperties")] = /* @__PURE__ */ new Map(), v[P("finalized")] = /* @__PURE__ */ new Map(), I == null || I({ ReactiveElement: v }), (f.reactiveElementVersions ?? (f.reactiveElementVersions = [])).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -585,7 +585,7 @@ function j(n) {
 }
 class y {
   static onBundlesReady() {
-    return y.makeSureSallaIsReady().then(() => Salla.event.onlyWhen("twilight-bundles::initiated"));
+    return y.makeSureSallaIsReady().then(() => Salla.event.onlyWhen("twilight-bundles::initiated")).then(() => Salla.lang.onLoaded());
   }
   static async initializeSalla() {
     if (Salla.status === "ready") {
@@ -615,7 +615,7 @@ class y {
     });
   }
 }
-var Ot = Object.defineProperty, I = (n, t, e, s) => {
+var Ot = Object.defineProperty, L = (n, t, e, s) => {
   for (var i = void 0, r = n.length - 1, o; r >= 0; r--)
     (o = n[r]) && (i = o(t, e, i) || i);
   return i && Ot(t, e, i), i;
@@ -637,16 +637,16 @@ const F = class F extends M {
 };
 F.styles = pt`:host { display: block; }`;
 let E = F;
-I([
+L([
   j()
 ], E.prototype, "key");
-I([
+L([
   j()
 ], E.prototype, "data");
-I([
+L([
   j()
 ], E.prototype, "imports");
-I([
+L([
   j()
 ], E.prototype, "shadowRootMode");
 class Ht extends HTMLElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-bundles",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "SDK for Salla Twilight Bundles - Develop and build custom components for Salla platform",
   "type": "module",
   "main": "./dist/twilight-bundles.js",