pawa-ssr 1.3.30 → 1.4.1

package/index.d.ts

@@ -0,0 +1,66 @@
+import { HTMLElement } from 'linkedom';
+
+/**
+ * Core rendering function that processes PawaElements/HTMLElements and writes to a stream.
+ */
+export function render(el: any, contexts?: object, stream?: (s: string) => void): Promise<void>;
+
+export interface StartAppResult {
+  element: any;
+  toString: () => Promise<string>;
+  head: string;
+}
+
+/**
+ * Initializes and renders the application for standard SSR.
+ */
+export function startApp(
+  html: string,
+  context?: object,
+  development?: boolean
+): Promise<StartAppResult>;
+
+/**
+ * Initializes and renders the application using Node.js streams for performance and Suspense support.
+ */
+export function startStreamApp(
+  html: string,
+  context: object,
+  stream: (s: string) => void,
+  options: { templateStart: string; templateEnd: string }
+): Promise<void>;
+
+/**
+ * Adds custom directives that should be treated as part of the PawaJS directive set.
+ */
+export function addToPartlyDirective(...partly: string[]): void;
+
+/**
+ * Returns an array of all reserved server attributes.
+ */
+export function getAllServerAttrArray(): string[];
+
+/**
+ * Returns the set of registered Pawa attributes.
+ */
+export function getPawaAttributes(): Set<string>;
+
+/**
+ * Checks if the application is running in development mode.
+ */
+export function getDevelopment(): boolean | undefined;
+
+/**
+ * Configures the server-side hooks for PawaJS.
+ */
+export const pawaForServer: (config: {
+  useContext: (context: { id: string }) => any;
+  useInnerContext: () => any;
+  useInsert: (obj?: object) => void;
+  setContext: () => { id: string; setValue: (context: object) => void };
+  $state: <T>(initialValue: T | (() => T)) => T;
+  accessChild: () => void;
+  useServer: () => { setServerData: (data: object) => void, getServerData: () => object } | undefined;
+  useAsync: () => { $async: <R>(callback: () => R) => R, onSuspense: (html: string) => void } | undefined;
+  forwardProps: (props?: object) => void;
+}) => void;

package/index.js

@@ -243,92 +243,6 @@ const setPawaAttribute=(...attr)=>{
 }
 setPawaAttribute('if','else','else-if','for-each','case','switch','s-default','for-key','key')
 export const getPawaAttributes=()=>pawaAttributes
-/**
- * @typedef {{startsWith:string,fullName:string,plugin:(el:HTMLElement | PawaElement,attr:object)=>void}} AttriPlugin
- */
-/**
- * @typedef {{
- * attribute?:{register:Array<AttriPlugin>},
- * component?:{
- * beforeCall?:(stateContext:PawaComponent,app:object)=>void,
- * afterCall?:(stateContext:PawaComponent,el:HTMLElement)=>void
- * },
- * renderSystem?:{
- *  beforePawa?:(el:HTMLElement,context:object)=>void,
- *  afterPawa?:(el:PawaElement)=>void,
- *  beforeChildRender?:(el:PawaElement)=>void
- * }
- * }} PluginObject
- */
-/**
- * @param {Array<()=>PluginObject>} func
- */
-export const PluginSystem=(...func)=>{
-  func.forEach(fn=>{ 
-    /**
-     * @type {PluginObject}
-     */
-    if (typeof fn !== 'function') {
-      console.warn('plugin must be a function that returns the plugin objects')
-      return
-    }
-    const getPlugin=fn()
-    // attributes plugin or extension
-    
-    if (getPlugin?.attribute) {
-      getPlugin.attribute.register.forEach(attrPlugins =>{
-        if (attrPlugins.fullName && attrPlugins.startsWith) {
-          console.warn('Either Plugins FullName or startsWith. you are not required to use to of does plugin registers at this same entry.')
-          return
-        }
-        if (attrPlugins?.fullName) {
-          if (pawaAttributes.has(attrPlugins.fullName) ) {
-            console.warn(`attribute plugin already exist ${attrPlugins.fullName}`)
-            return
-          }
-          pawaAttributes.add(attrPlugins.fullName)
-        fullNamePlugin.add(attrPlugins.fullName)
-        externalPlugin[attrPlugins.fullName]=attrPlugins?.plugin
-        }else if (attrPlugins?.startsWith) {
-          if (pawaAttributes.has(attrPlugins.startsWith) ) {
-          console.warn(`attribute plugin already exist ${attrPlugins.startsWith}`)
-          return
-        }
-        pawaAttributes.add(attrPlugins.startsWith)
-        startsWithSet.add(attrPlugins.startsWith)
-        externalPlugin[attrPlugins.startsWith]=attrPlugins?.plugin
-        }
-      })
-    }
-    if (getPlugin?.component) {
-      if (getPlugin.component?.beforeCall && typeof getPlugin.component?.beforeCall === 'function') {
-        compoBeforeCall.add(getPlugin.component.beforeCall)
-      }
-      if (getPlugin.component?.afterCall && typeof getPlugin.component?.afterCall === 'function') {
-        compoAfterCall.add(getPlugin.component.afterCall)
-      }
-    }
-    if (getPlugin?.renderSystem) {
-      if (getPlugin.renderSystem?.beforePawa && typeof getPlugin.renderSystem?.beforePawa === 'function') {
-        renderBeforePawa.add(getPlugin.renderSystem?.beforePawa)
-      }
-      if (getPlugin.renderSystem?.afterPawa && typeof getPlugin.renderSystem?.afterPawa === 'function') {
-        renderAfterPawa.add(getPlugin.renderSystem?.afterPawa)
-      }
-      if (getPlugin.renderSystem?.beforeChildRender && typeof getPlugin.renderSystem?.beforeChildRender === 'function') {
-        renderBeforeChild.add(getPlugin.renderSystem?.beforeChildRender)
-      }
-    }
-  })
-}
-
-export const useValidateComponent=(component,object)=>{
-  if (typeof component === 'function' ) {
-    if(component.name){
-      component.validateProps=object
-    }
-  }
-}
 
 /**
  * @typedef {{
@@ -484,12 +398,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 +412,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 +629,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 +642,7 @@ appContext.component._prop={children,...el._props,...slots}
           }else{
             getChildren.setAttribute(attr.name, attr.value)
           }
-        })
-        asChild.remove()
-        divs.appendChild(getChildren)        
+        })      
       }
     }   
     if (isBoundary) {
@@ -931,7 +843,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 +861,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 +988,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 +1006,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.30",
+  "version": "1.4.1",
   "type": "module",
   "description": "pawajs ssr libary",
   "main": "index.js",
@@ -24,7 +24,9 @@
   },
   "homepage": "https://github.com/Allisboy/pawajs-ssr#readme",
   "dependencies": {
-    "linkedom": "^0.18.11",
-    "pawajs": "^1.5.2"
+    "linkedom": "^0.18.11"
+  },
+  "peerDependencies": {
+    "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}`)
@@ -281,16 +284,11 @@ class PawaElement {
 evaluateExpr(expr, context = {},error){
   try {
     const keys = Object.keys(context);
-    // Create a cache key based on the expression and the available context keys
-    // We sort keys to ensure consistent cache hits regardless of key order
-    const cacheKey = expr + '|||' + keys.sort().join(',');
-
-    let func = expressionCache.get(cacheKey);
+    let func 
     if (!func) {
       func = new Function(...keys, `
         const require=null
         return ${expr}`);
-      expressionCache.set(cacheKey, func);
     }
 
     const values = keys.map((key) => context[key]);

package/test/App.js

@@ -1,4 +1,8 @@
+import { useInnerContext } from "pawajs"
+
 export const App=({children})=>{
+    const context=useInnerContext()
+    console.log(context)
     return `<div class="p-4">
         <h1 class="text-2xl font-bold mb-4">Hello, World!</h1>
         <p class="text-gray-700">This is a test component for PawaJS.</p>

package/test/index.js

@@ -1,13 +1,24 @@
-import {useValidateComponent, RegisterComponent,useContext,useInsert,setContext} from 'pawajs'
-import {startApp} from '../index.js'
+import {useValidateComponent, RegisterComponent,useContext,useInsert,setContext,forwardProps} from 'pawajs'
+import {startApp,startStreamApp} 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>aschild</div>
+  </dinput>
   <app>
     <check></check>
     <check-2></check-2>
@@ -17,5 +28,11 @@ const app=`
   </div>
 </div>
 `
-const {toString}=await startApp(app)
-console.log(await toString());
+// const {toString}=await startApp(app)
+// console.log(await toString());
+let strings=''
+const stream=(string)=>strings+=string
+
+await startStreamApp(app,{url:'/'},stream,{templateEnd:'</body>',templateStart:'<body>'})
+console.log(strings);
+