pawa-ssr 1.3.29 → 1.4.0

package/index.js

@@ -484,12 +484,13 @@ appContext.component._prop={children,...el._props,...slots}
     }else{
       Object.assign(restProps,el._restProps)
     }
-         const getAsChild=()=>{
-      const asChild=div.firstElementChild
-      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
-        const getChildren=asChild.firstElementChild
+     const getAsChild=(divs)=>{
+      const divFirst=divs.firstElementChild
+      if (el._aschild) {
+        divs.innerHTML=children
+        const getChildren=divs.firstElementChild
         if (getChildren === null) return
-        Array.from(asChild.attributes).forEach(attr=>{
+        Array.from(divFirst.attributes).forEach(attr=>{
           if (getChildren.hasAttribute(attr.name)) {
             let attrName=getChildren.getAttribute(attr.name)
             attrName=attr.value +' '+attrName
@@ -497,12 +498,10 @@ appContext.component._prop={children,...el._props,...slots}
           }else{
             getChildren.setAttribute(attr.name, attr.value)
           }
-        })
-        asChild.remove()
-        div.appendChild(getChildren)        
+        })      
       }
-    }       
-    getAsChild()
+    }          
+    getAsChild(div)
           const findElement=div.querySelector('[--]') || div.querySelector('[r-]')
           if (findElement) {
             for (const [key,value] of Object.entries(restProps)) {
@@ -716,11 +715,12 @@ appContext.component._prop={children,...el._props,...slots}
       Object.assign(restProps,el._restProps)
     }
     const getAsChild=(divs)=>{
-      const asChild=divs.firstElementChild
-      if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
-        const getChildren=asChild.firstElementChild
+      const divFirst=divs.firstElementChild
+      if (el._aschild) {
+        divs.innerHTML=children
+        const getChildren=divs.firstElementChild
         if (getChildren === null) return
-        Array.from(asChild.attributes).forEach(attr=>{
+        Array.from(divFirst.attributes).forEach(attr=>{
           if (getChildren.hasAttribute(attr.name)) {
             let attrName=getChildren.getAttribute(attr.name)
             attrName=attr.value +' '+attrName
@@ -728,9 +728,7 @@ appContext.component._prop={children,...el._props,...slots}
           }else{
             getChildren.setAttribute(attr.name, attr.value)
           }
-        })
-        asChild.remove()
-        divs.appendChild(getChildren)        
+        })      
       }
     }   
     if (isBoundary) {
@@ -931,7 +929,11 @@ const attributeHandler =async (el, attr) => {
   if (el._componentName) {
     return
   }
-  el._replaceResumeAttr(attr.name,`c-at-${attr.name}`,attr.value)
+
+  const isAtAttr = attr.name.startsWith('@');
+  const targetName = isAtAttr ? attr.name.slice(1) : attr.name;
+
+  el._replaceResumeAttr(attr.name, `c-at-${targetName}`, attr.value);
   const currentHtmlString = el.outerHTML;
   const removableAttributes = new Set();
   removableAttributes.add('disabled');
@@ -945,18 +947,18 @@ const attributeHandler =async (el, attr) => {
         const func =el._evaluateExpr(
           expression,
           el._context,
-          `from text interpolation @{} - ${expression} at ${currentHtmlString} attribute ${attr.name}`
+          `from text interpolation @{} - ${expression} at ${currentHtmlString} attribute ${targetName}`
         );
         value = value.replace(fullMatch, String(func));
       });
-      if (removableAttributes.has(attr.name)) {
+      if (removableAttributes.has(targetName)) {
         if (value) {
-          el.setAttribute(attr.name, '');
+          el.setAttribute(targetName, '');
         } else {
-          el.removeAttribute(attr.name);
+          el.removeAttribute(targetName);
         }
       } else {
-        el.setAttribute(attr.name, value);
+        el.setAttribute(targetName, value);
       }
     } catch (error) {
       console.log(error.message, error.stack);
@@ -1072,12 +1074,12 @@ export const render =async (el, contexts = {},stream) => {
       for(const attr of attributes){
         if (directives[attr.name]) {
           await directives[attr.name](el,attr,stream)  
-        }else if(attr.value.includes('@{') && !isAcomponent){
+        }else if((attr.value.includes('@{') || attr.name.startsWith('@')) && !isAcomponent){
           await  attributeHandler(el,attr)
         }else if (attr.name.startsWith('state-')) {
           directives['state-'](el,attr)
         }
-        else if(fullNamePlugin.has(attr.name)) {
+        else if(fullNamePlugin.has(attr.name) && !el._componentName) {
           if(externalPlugin[attr.name]){
             const plugin= externalPlugin[attr.name]
             try{
@@ -1090,9 +1092,9 @@ export const render =async (el, contexts = {},stream) => {
               console.warn(error.message,error.stack)
             }
           }
-        }else if(startAttribute){
+        }else if(startAttribute ){
           const name=startObject[attr.name]
-          if(externalPlugin[name]){
+          if(externalPlugin[name] && !el._componentName){
             const plugin= externalPlugin[name]
             try{
               if (typeof plugin !== 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pawa-ssr",
-  "version": "1.3.29",
+  "version": "1.4.0",
   "type": "module",
   "description": "pawajs ssr libary",
   "main": "index.js",
@@ -25,6 +25,6 @@
   "homepage": "https://github.com/Allisboy/pawajs-ssr#readme",
   "dependencies": {
     "linkedom": "^0.18.11",
-    "pawajs": "^1.5.1"
+    "pawajs": "^2.0.0"
   }
 }

package/pawaElement.js

@@ -19,6 +19,7 @@ class PawaElement {
        * @type{PawaElement|HTMLElement}
        */
         this._el=element
+        this._aschild=false
         this._slots=document.createDocumentFragment()
         this._context=context
         this._avoidPawaRender=element.hasAttribute('s-pawa-avoid')
@@ -166,6 +167,7 @@ class PawaElement {
       
       getComponent(){
         if (components.has(splitAndAdd(this._el.tagName.toUpperCase())) && !this._client || this._lazy) {
+          if(this._el.hasAttribute('data-prevent:c'))return
           this._componentName=splitAndAdd(this._el.tagName.toUpperCase())
           const fakeCompo=()=>true
           this._component=new PawaComponent(components.get(splitAndAdd(this._el.tagName.toUpperCase())),fakeCompo)
@@ -194,12 +196,13 @@ class PawaElement {
      //set Component props
       setProps(){
         if (this._componentName) {
-         const allServerAttr=getPawaAttributes()
+         const allServerAttr=['if','else','else-if','key','for-each','case','switch','s-default']
           this._el.attributes.forEach(attr=>{
-            if(!allServerAttr.has(attr.name)){
-              if (attr.name === 'svg') {
-               return
-              }
+            if (attr.name ==='aschild' || attr.name === 'as-child' || attr.name === ':as-child') {
+              this._aschild=true
+              return
+            }
+            if(!allServerAttr.includes(attr.name)){
               if ( !attr.name.startsWith(':')) {
                   if( attr.name.startsWith('c-')||attr.name.startsWith('pawa-') || attr.name.startsWith('p:c') || attr.name.startsWith('state-')) return
                 let name=''
@@ -228,7 +231,7 @@ class PawaElement {
                      
                  });
                  return value
-                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
+                 }else if( attr.name.startsWith('on-') || attr.name.startsWith('out-')){
                   const res=this.evaluateExpr(`(e)=>{
                     ${attr.value}
                   }`, this._context,`evaluating props with template operators at ${attr.name} - ${attr.value} : ${this._template}`)

package/power.js

@@ -316,8 +316,7 @@ export const For=async(el,attr,stream)=>{
         stream(`<!--${endComment.data}-->`)
       }else{
         template.setAttribute('pawa-render',true)
-        stream(`<template pawa-render="true">${el.outerHTML}</template>`)
-        template.appendChild(el)
+      stream(template.outerHTML)
         comment.replaceWith(template)
         endComment.remove()
       }

package/test/index.js

@@ -1,17 +1,31 @@
-import {useValidateComponent, RegisterComponent,useContext,useInsert,setContext} from 'pawajs'
+import {useValidateComponent, RegisterComponent,useContext,useInsert,setContext,forwardProps} from 'pawajs'
 import {startApp} from '../index.js'
  RegisterComponent.lazy(
   'App',()=>import('./App.js'),
   'Check',()=>import('./check.js'),
   'Check2',()=>import('./check.js'),
 )
-
+const Dinput=({className,...props})=>{
+  forwardProps(props)
+  const classActive=()=>[className?.() || '','py-2 text-blue'].join(' ')
+  useInsert({classActive})
+  return `
+  <input class="@{classActive()}" -- />
+  `
+}
+RegisterComponent(Dinput)
 const app=`
 <div>
+  <dinput type="file" aschild>
+    <div>input</div>
+  </dinput>
   <app>
     <check></check>
     <check-2></check-2>
   </app>
+  <div state-array="['astro']">
+    <span for-each="item,i in array.value" for-key="{{item}}">@{item}</span>
+  </div>
 </div>
 `
 const {toString}=await startApp(app)