pawajs 1.4.36 → 1.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +27 -0
- package/index.js +35 -12
- package/merger/for.js +4 -1
- package/merger/switch.js +1 -1
- package/normal/component.js +50 -10
- package/package.json +1 -1
- package/pawaElement.js +69 -17
- package/power.js +22 -19
- package/reactive.js +9 -2
- package/server.js +1 -0
package/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface PawaElement extends HTMLElement {
|
|
|
10
10
|
_terminateEffects: Set<Function>;
|
|
11
11
|
_deleteEffects: () => void;
|
|
12
12
|
_slots: DocumentFragment;
|
|
13
|
+
_stateContext: any;
|
|
13
14
|
_mainAttribute: Record<string, any>;
|
|
14
15
|
_preRenderAvoid: string[];
|
|
15
16
|
_lazy: boolean;
|
|
@@ -74,6 +75,7 @@ export interface PawaElement extends HTMLElement {
|
|
|
74
75
|
mount(): void;
|
|
75
76
|
elementType(): void;
|
|
76
77
|
setProps(): void;
|
|
78
|
+
safeEval(context: any, expr: string, error?: string, element?: boolean): any;
|
|
77
79
|
}
|
|
78
80
|
|
|
79
81
|
export interface PawaComment extends Comment {
|
|
@@ -157,6 +159,9 @@ export function pluginsMap(): {
|
|
|
157
159
|
fullNamePlugin: Set<string>;
|
|
158
160
|
externalPlugin: Record<string, Function>;
|
|
159
161
|
externalPluginMap: Map<string, string[]>;
|
|
162
|
+
primaryDirective: Set<string>;
|
|
163
|
+
pawaAttributes: Set<string>;
|
|
164
|
+
allowAsProp: Set<string>;
|
|
160
165
|
};
|
|
161
166
|
|
|
162
167
|
export const escapePawaAttribute: Set<string>;
|
|
@@ -178,6 +183,19 @@ export function keepContext(context: any): void;
|
|
|
178
183
|
|
|
179
184
|
export const components: Map<string, Function>;
|
|
180
185
|
|
|
186
|
+
export const lazyComponents: Map<string, any>;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Internal registry for tracking elements awaiting lazy component loading.
|
|
190
|
+
*/
|
|
191
|
+
export const lazyComponentElement: Map<string, { element: PawaElement; func: Function }[]>;
|
|
192
|
+
|
|
193
|
+
export function addLazyComponentElement(element: PawaElement, func: Function): void;
|
|
194
|
+
|
|
195
|
+
export function createIntersectionObserver(element: HTMLElement, observeBy?: HTMLElement): IntersectionObserver;
|
|
196
|
+
|
|
197
|
+
export const HmrComponentMap: Map<string, any>;
|
|
198
|
+
|
|
181
199
|
export function getCurrentContext(): any;
|
|
182
200
|
|
|
183
201
|
export function setPawaAttributes(...attr: string[]): void;
|
|
@@ -278,6 +296,12 @@ export function useAsync(): { $async: <T>(callback: () => T) => T ,onSuspense:(h
|
|
|
278
296
|
*/
|
|
279
297
|
export function isResume(): boolean;
|
|
280
298
|
|
|
299
|
+
/**
|
|
300
|
+
* Forwards props to the child component.
|
|
301
|
+
* @param {Record<string, any>} [props] - Props to forward.
|
|
302
|
+
*/
|
|
303
|
+
export function forwardProps(props?: Record<string, any>): void;
|
|
304
|
+
|
|
281
305
|
/**
|
|
282
306
|
* Exposes variables to the template scope.
|
|
283
307
|
* @param {Record<string, any>} [obj] - Variables to expose.
|
|
@@ -335,7 +359,10 @@ declare const Pawa: {
|
|
|
335
359
|
setContext: typeof setContext;
|
|
336
360
|
$state: typeof $state;
|
|
337
361
|
pawaStartApp: typeof pawaStartApp;
|
|
362
|
+
useAsync: typeof useAsync;
|
|
363
|
+
useInnerContext: typeof useInnerContext;
|
|
338
364
|
RegisterComponent: typeof RegisterComponent;
|
|
365
|
+
forwardProps: typeof forwardProps;
|
|
339
366
|
runEffect: typeof runEffect;
|
|
340
367
|
html: typeof html;
|
|
341
368
|
};
|
package/index.js
CHANGED
|
@@ -75,6 +75,7 @@ const startsWithSet = new Set()
|
|
|
75
75
|
const fullNamePlugin = new Set()
|
|
76
76
|
const externalPlugin = {}
|
|
77
77
|
const externalPluginMap = new Map()
|
|
78
|
+
const allowAsProp= new Set()
|
|
78
79
|
let pawaAttributes = new Set()
|
|
79
80
|
let primaryDirective = new Set()
|
|
80
81
|
|
|
@@ -90,6 +91,7 @@ const mapsPlugins = {
|
|
|
90
91
|
externalPluginMap,
|
|
91
92
|
primaryDirective,
|
|
92
93
|
pawaAttributes,
|
|
94
|
+
allowAsProp
|
|
93
95
|
}
|
|
94
96
|
export const pluginsMap = () => mapsPlugins
|
|
95
97
|
export const escapePawaAttribute = new Set()
|
|
@@ -120,7 +122,8 @@ const applyMode = (mode, callback) => {
|
|
|
120
122
|
}
|
|
121
123
|
}
|
|
122
124
|
/**
|
|
123
|
-
* @typedef {{startsWith:string,mode:null |'client'|'server',dependency:Array<string>,
|
|
125
|
+
* @typedef {{startsWith:string,mode:null |'client'|'server',dependency:Array<string>,
|
|
126
|
+
* allowAsProp:boolean,fullName:string,plugin:(el:HTMLElement | PawaElement,attr:object)=>void}} AttriPlugin
|
|
124
127
|
*/
|
|
125
128
|
/**
|
|
126
129
|
* @typedef {{
|
|
@@ -155,8 +158,12 @@ func.forEach(fn => {
|
|
|
155
158
|
dependentPawaAttribute.add(dp); extPluginArray.push(dp)
|
|
156
159
|
})
|
|
157
160
|
}
|
|
161
|
+
|
|
158
162
|
const name = attrPlugins.fullName || attrPlugins.startsWith, set = attrPlugins.fullName ? fullNamePlugin : startsWithSet
|
|
159
163
|
if (pawaAttributes.has(name)) { console.warn(`attribute plugin already exist ${name}`); return }
|
|
164
|
+
if (attrPlugins?.allowAsProp) {
|
|
165
|
+
allowAsProp.add(name)
|
|
166
|
+
}
|
|
160
167
|
applyMode(attrPlugins?.mode, () => {
|
|
161
168
|
pawaAttributes.add(name); set.add(name); externalPlugin[name] = attrPlugins.plugin
|
|
162
169
|
if (extPluginArray.length) externalPluginMap.set(name, extPluginArray)
|
|
@@ -227,9 +234,9 @@ const setPrimaryAttibute = (...name) => {
|
|
|
227
234
|
|
|
228
235
|
export const getPrimaryDirectives=()=>primaryDirective
|
|
229
236
|
|
|
230
|
-
setPrimaryAttibute('if', 'else-if', 'for-each', 'else','switch','case','default','
|
|
237
|
+
setPrimaryAttibute('if', 'else-if', 'for-each', 'else','switch','case','s-default','key')
|
|
231
238
|
setPawaAttributes('if', 'else-if', 'for-each', 'else', 'mount',
|
|
232
|
-
'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','default')
|
|
239
|
+
'unmount', 'forKey', 'state-', 'on-', 'out-','key','switch','case','s-default')
|
|
233
240
|
export const getDependentAttribute = () => dependentPawaAttribute
|
|
234
241
|
export const getPawaAttributes = () => {
|
|
235
242
|
return pawaAttributes
|
|
@@ -295,7 +302,10 @@ export const createIntersectionObserver = (element, observeBy) => {
|
|
|
295
302
|
while (instances.length > 0) {
|
|
296
303
|
const { element: el, func } = instances.shift();
|
|
297
304
|
if (el) {
|
|
298
|
-
if (el._component)
|
|
305
|
+
if (el._component){
|
|
306
|
+
el._component.component = compoFunc;
|
|
307
|
+
el._component.validPropRule=compoFunc?.validateProps || {}
|
|
308
|
+
}
|
|
299
309
|
|
|
300
310
|
keepContext(el._stateContext);
|
|
301
311
|
el._stateContext._hasRun = false;
|
|
@@ -403,13 +413,13 @@ RegisterComponent.lazy=async(...args)=>{
|
|
|
403
413
|
}
|
|
404
414
|
},{
|
|
405
415
|
_terminateEffects:terminateEffect
|
|
406
|
-
})
|
|
416
|
+
},)
|
|
407
417
|
if (terminateEffect.size > 0) {
|
|
408
418
|
window.addEventListener('beforeunload',()=>{
|
|
409
419
|
terminateEffect.forEach(fn =>{
|
|
410
420
|
fn()
|
|
411
421
|
})
|
|
412
|
-
})
|
|
422
|
+
},deps?.update)
|
|
413
423
|
}
|
|
414
424
|
}
|
|
415
425
|
} else if (Array.isArray(deps)) {
|
|
@@ -584,6 +594,14 @@ export const isResume = () => {
|
|
|
584
594
|
return false
|
|
585
595
|
}
|
|
586
596
|
}
|
|
597
|
+
export const forwardProps=(props={})=>{
|
|
598
|
+
if (client) {
|
|
599
|
+
if (isResume())return
|
|
600
|
+
stateContext._restProps=Object.entries(props).length > 0 ? props : {bPAr:''}
|
|
601
|
+
}else{
|
|
602
|
+
return serverInstance.forwardProps?.(props)
|
|
603
|
+
}
|
|
604
|
+
}
|
|
587
605
|
/**
|
|
588
606
|
* Insert into the html context in component
|
|
589
607
|
* @param {object} obj
|
|
@@ -652,6 +670,7 @@ export const setStateContext = (context) => {
|
|
|
652
670
|
stateContext._serializedData={}
|
|
653
671
|
stateContext._formerContext = formerStateContext
|
|
654
672
|
stateContext._reactiveProps = {}
|
|
673
|
+
stateContext._restProps={}
|
|
655
674
|
stateContext._template = ''
|
|
656
675
|
stateContext._resume = false
|
|
657
676
|
stateContext._suspense=''
|
|
@@ -921,8 +940,9 @@ const component = (el, resume = false, attr, notRender, stopResume) => {
|
|
|
921
940
|
if (!lazyComponentElement.has(name)) {
|
|
922
941
|
createInsectObserver(trackElement,el)
|
|
923
942
|
}
|
|
943
|
+
}else{
|
|
944
|
+
resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children })
|
|
924
945
|
}
|
|
925
|
-
resumer.resume_component?.(el, attr, setStateContext, mapsPlugins, formerStateContext, pawaContext, stateWatch, { comment, endComment, name, serialized, id, children })
|
|
926
946
|
}
|
|
927
947
|
}
|
|
928
948
|
|
|
@@ -988,7 +1008,8 @@ const mainAttribute = (el, exp) => {
|
|
|
988
1008
|
el.value = value;
|
|
989
1009
|
el.setAttribute(exp.name, value);
|
|
990
1010
|
} else {
|
|
991
|
-
if (exp.name === 'class' &&
|
|
1011
|
+
if ((exp.name === 'class' || exp.name === 'style') && enter) {
|
|
1012
|
+
|
|
992
1013
|
requestAnimationFrame(()=>{
|
|
993
1014
|
el.setAttribute(exp.name, value);
|
|
994
1015
|
})
|
|
@@ -1148,23 +1169,24 @@ export const render = (el, contexts = {}, notRender, isName) => {
|
|
|
1148
1169
|
})
|
|
1149
1170
|
})
|
|
1150
1171
|
const number = { notRender: null }
|
|
1172
|
+
const isAcomponent=el._componentName?true:false
|
|
1151
1173
|
el._attributes.forEach(attr => {
|
|
1152
1174
|
|
|
1153
1175
|
if (stopResume.stop || el._hasRun) return
|
|
1154
1176
|
if (directives[attr.name]) {
|
|
1155
1177
|
directives[attr.name](el, attr, stateContext)
|
|
1156
|
-
} else if (attr.name.startsWith('on-')) {
|
|
1178
|
+
} else if (attr.name.startsWith('on-') && !isAcomponent) {
|
|
1157
1179
|
event(el, attr, stateContext)
|
|
1158
1180
|
} else if (attr.value.includes('@{') && !attr.name.startsWith('c-at-')) {
|
|
1159
1181
|
mainAttribute(el, attr, isName)
|
|
1160
1182
|
} else if (attr.name.startsWith('state-')) {
|
|
1161
1183
|
States(el, attr, getCurrentContext())
|
|
1162
|
-
} else if (attr.name.startsWith('out-')) {
|
|
1184
|
+
} else if (attr.name.startsWith('out-') && !isAcomponent) {
|
|
1163
1185
|
documentEvent(el, attr)
|
|
1164
|
-
} else if (attr.name.startsWith('after-[') && attr.name.endsWith(']')) {
|
|
1186
|
+
} else if (attr.name.startsWith('after-[') && attr.name.endsWith(']') && !isAcomponent) {
|
|
1165
1187
|
After(el, attr)
|
|
1166
1188
|
}
|
|
1167
|
-
else if (attr.name.startsWith('every-[') && attr.name.endsWith(']')) {
|
|
1189
|
+
else if (attr.name.startsWith('every-[') && attr.name.endsWith(']') && !isAcomponent) {
|
|
1168
1190
|
Every(el, attr)
|
|
1169
1191
|
}
|
|
1170
1192
|
else if (attr.name.startsWith('c-c-')) {
|
|
@@ -1314,6 +1336,7 @@ const Pawa = {
|
|
|
1314
1336
|
useAsync,
|
|
1315
1337
|
useInnerContext,
|
|
1316
1338
|
RegisterComponent,
|
|
1339
|
+
forwardProps,
|
|
1317
1340
|
runEffect,
|
|
1318
1341
|
html
|
|
1319
1342
|
}
|
package/merger/for.js
CHANGED
|
@@ -11,6 +11,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
|
|
|
11
11
|
let func
|
|
12
12
|
let context=el._context
|
|
13
13
|
const keyOrder=keyOrders || new Map()
|
|
14
|
+
let noKey
|
|
14
15
|
const evaluate = () => {
|
|
15
16
|
if (endComment.parentElement === null) {
|
|
16
17
|
el._deleteEffects()
|
|
@@ -50,6 +51,8 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
|
|
|
50
51
|
keyComment._index = lookLike.getAttribute('data-for-index')
|
|
51
52
|
}
|
|
52
53
|
if (!el.getAttribute('for-key')) {
|
|
54
|
+
noKey=true
|
|
55
|
+
lookLike=true
|
|
53
56
|
return
|
|
54
57
|
}
|
|
55
58
|
if(lookLike) return
|
|
@@ -87,7 +90,7 @@ export const merger_for = (el, stateContext, attr, arrayName, arrayItem, indexes
|
|
|
87
90
|
}
|
|
88
91
|
const next = () => Promise.all(removeElement).then(async (res) => {
|
|
89
92
|
if (res) {
|
|
90
|
-
if (update) {
|
|
93
|
+
if (update && !noKey) {
|
|
91
94
|
const keyMap = new Map()
|
|
92
95
|
elementArray.forEach(child => {
|
|
93
96
|
keyMap.set(child._forKey, child)
|
package/merger/switch.js
CHANGED
|
@@ -52,7 +52,7 @@ export const merger_switch=(el,attr,stateContext,resume=false,{comment,endCommen
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
const setElement=(newElement,exp)=>{
|
|
55
|
-
newElement.removeAttribute(exp)
|
|
55
|
+
newElement.removeAttribute(exp === 'default'?'s-default':exp)
|
|
56
56
|
if (stateContext._hasRun) {
|
|
57
57
|
stateContext._hasRun = false
|
|
58
58
|
keepContext(stateContext)
|
package/normal/component.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate } from '../utils.js';
|
|
1
|
+
import {propsValidator, setPawaDevError, pawaWayRemover, checkKeywordsExistence, sanitizeTemplate, splitAndAdd } from '../utils.js';
|
|
2
2
|
import {PawaElement,PawaComment} from '../pawaElement.js';
|
|
3
3
|
import {keepContext,render, HmrComponentMap } from '../index.js'
|
|
4
4
|
import {createEffect} from '../reactive.js'
|
|
@@ -61,7 +61,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
|
|
|
61
61
|
console.error(error.message)
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
|
|
64
|
+
let div =el._compoToSvg?document.createElementNS('http://www.w3.org/2000/svg', 'svg'): document.createElement('div')
|
|
65
65
|
el._componentTerminate=() => {
|
|
66
66
|
comment._terminateByComponent(endComment)
|
|
67
67
|
}
|
|
@@ -151,15 +151,55 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
|
|
|
151
151
|
if (component?._insert) {
|
|
152
152
|
Object.assign(el._context,component._insert)
|
|
153
153
|
}
|
|
154
|
+
const restProps={}
|
|
155
|
+
if (Object.entries(stateContexts._restProps).length > 0) {
|
|
156
|
+
const props=el._restProps
|
|
157
|
+
if (stateContexts._restProps['className'] && props['class']) {
|
|
158
|
+
restProps['class']={...props['class']}
|
|
159
|
+
}
|
|
160
|
+
if (stateContexts._restProps['defaultValue'] && props['default']) {
|
|
161
|
+
restProps['default']={...props['default']}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
for (const key in props) {
|
|
165
|
+
let name=key
|
|
166
|
+
name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
167
|
+
if (stateContexts._restProps[name]) {
|
|
168
|
+
restProps[key]={...props[key]}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}else{
|
|
172
|
+
Object.assign(restProps,el._restProps)
|
|
173
|
+
}
|
|
154
174
|
const context=el._context
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
175
|
+
const getAsChild=()=>{
|
|
176
|
+
const asChild=div.firstElementChild
|
|
177
|
+
if (splitAndAdd(asChild?.tagName|| '') === 'ASCHILD') {
|
|
178
|
+
const getChildren=asChild.firstElementChild
|
|
179
|
+
Array.from(asChild.attributes).forEach(attr=>{
|
|
180
|
+
if (getChildren.hasAttribute(attr.name)) {
|
|
181
|
+
let attrName=getChildren.getAttribute(attr.name)
|
|
182
|
+
attrName=attr.value +' '+attrName
|
|
183
|
+
getChildren.setAttribute(attr.name, attrName)
|
|
184
|
+
}else{
|
|
185
|
+
getChildren.setAttribute(attr.name, attr.value)
|
|
186
|
+
}
|
|
187
|
+
})
|
|
188
|
+
asChild.remove()
|
|
189
|
+
div.appendChild(getChildren)
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
const propsSetter=()=>{
|
|
193
|
+
getAsChild()
|
|
194
|
+
const findElement=div.querySelector('[--]') || div.querySelector('[rest]')
|
|
195
|
+
if (findElement) {
|
|
196
|
+
findElement.removeAttribute('--')
|
|
197
|
+
findElement.removeAttribute('rest')
|
|
198
|
+
}
|
|
199
|
+
if(Object.entries(restProps).length > 0){
|
|
158
200
|
if (findElement) {
|
|
159
|
-
for (const [key,value] of Object.entries(
|
|
201
|
+
for (const [key,value] of Object.entries(restProps)) {
|
|
160
202
|
findElement.setAttribute(value.name,value.value)
|
|
161
|
-
findElement.removeAttribute('--')
|
|
162
|
-
findElement.removeAttribute('rest')
|
|
163
203
|
}
|
|
164
204
|
}
|
|
165
205
|
}
|
|
@@ -181,7 +221,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
|
|
|
181
221
|
bfm._sent=true
|
|
182
222
|
const result= bfm(comment)
|
|
183
223
|
if (typeof result === 'function') {
|
|
184
|
-
el.
|
|
224
|
+
el._beforeUnMountFunctions.push(result)
|
|
185
225
|
}
|
|
186
226
|
})
|
|
187
227
|
|
|
@@ -228,7 +268,7 @@ export const normal_component=(el,stateContext,setStateContext,mapsPlugin,former
|
|
|
228
268
|
if (hook.deps?.component) {
|
|
229
269
|
createEffect(() => {
|
|
230
270
|
return effect()
|
|
231
|
-
},el)
|
|
271
|
+
},el,hook.deps?.update)
|
|
232
272
|
} else {
|
|
233
273
|
createEffect(() => {
|
|
234
274
|
return effect()
|
package/package.json
CHANGED
package/pawaElement.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {components,lazyComponents ,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives } from './index.js';
|
|
2
|
-
import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues} from './utils.js';
|
|
1
|
+
import {components,lazyComponents ,escapePawaAttribute,getPawaAttributes,getDependentAttribute,getPrimaryDirectives, pluginsMap } from './index.js';
|
|
2
|
+
import {splitAndAdd,replaceTemplateOperators,setPawaDevError,getEvalValues, checkKeywordsExistence} from './utils.js';
|
|
3
3
|
import PawaComponent from './pawaComponent.js';
|
|
4
4
|
import { createIntersectionObserver } from './index.js';
|
|
5
5
|
import { addLazyComponentElement } from './index.js';
|
|
@@ -23,12 +23,12 @@ export class PawaElement {
|
|
|
23
23
|
_el: element, _out: false, _stateContext: null, _terminateEffects: new Set(), _deleteEffects: this.terminateEffects,
|
|
24
24
|
_slots: document.createDocumentFragment(), _mainAttribute: {}, _preRenderAvoid: [], _running: false,
|
|
25
25
|
_hasForOrIf: this.hasForOrIf, _elementContent: element.textContent, _textContent: {}, _attributes: [],
|
|
26
|
-
_template: div.outerHTML, _exitAnimation: null, _component: null, _unMountFunctions: [], _MountFunctions: [],
|
|
26
|
+
_template: div.outerHTML, _exitAnimation: null, _component: null, _unMountFunctions: [], _MountFunctions: [],_beforeUnMountFunctions:[],
|
|
27
27
|
_elementType: '', _getNode: this.getNode, _componentOrTemplate: false, _props: {}, _isView: null,
|
|
28
|
-
_isElementComponent: false, _pawaAttribute: {}, _setUnMount: this.setUnMounts, _componentName: '',
|
|
28
|
+
_isElementComponent: false, _pawaAttribute: {}, _setUnMount: this.setUnMounts, _componentName: '',_compoToSvg: false,_asChild: false,
|
|
29
29
|
_attrElement: this.getNewElementByRemovingAttr, _attr: {}, _staticContext: [], _checkStatic: this.reCheckStaticContext,
|
|
30
30
|
_callMount: this.mount, _callUnmount: this.unMount, _remove: this.remove, _componentChildren: undefined,
|
|
31
|
-
_pawaElementComponent: null, _componentTerminate: null, _cacheSetUp: false, _effectsCarrier: null,
|
|
31
|
+
_pawaElementComponent: null, _componentTerminate: null, _cacheSetUp: false, _effectsCarrier: null,_beforeUnMount:this.beforeUnMount,
|
|
32
32
|
_pawaElementComponentName: '', _reCallEffect: this.reCallEffect, _ElementEffects: new Map(),
|
|
33
33
|
_deCompositionElement: false, _restProps: {}, _kill: null, _isKill: false, _scriptFetching: element.hasAttribute('script'),
|
|
34
34
|
_scriptDone: false, _underControl: null, safeEval: this.safeEval, _reactiveProps: {},
|
|
@@ -97,8 +97,11 @@ export class PawaElement {
|
|
|
97
97
|
const pawaAttr=this._el.getAttribute('p:c')
|
|
98
98
|
const array=pawaAttr.split(';')
|
|
99
99
|
array.forEach(value =>{
|
|
100
|
-
if(!this._el.hasAttribute(value))
|
|
101
|
-
|
|
100
|
+
if(!this._el.hasAttribute(value.toLowerCase())) {
|
|
101
|
+
return
|
|
102
|
+
}
|
|
103
|
+
this._attributes.push({name:value,value:this._el.getAttribute(value.toLowerCase())})
|
|
104
|
+
// console.log(this._el,this._attributes);
|
|
102
105
|
})
|
|
103
106
|
}else{
|
|
104
107
|
this._attributes=Array.from(this._el.attributes)
|
|
@@ -172,10 +175,8 @@ export class PawaElement {
|
|
|
172
175
|
}
|
|
173
176
|
}
|
|
174
177
|
async remove(callback){
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
return
|
|
178
|
-
}
|
|
178
|
+
|
|
179
|
+
await this._beforeUnMount()
|
|
179
180
|
if (typeof this._exitAnimation === 'function') {
|
|
180
181
|
|
|
181
182
|
try {
|
|
@@ -200,6 +201,15 @@ export class PawaElement {
|
|
|
200
201
|
}
|
|
201
202
|
return true
|
|
202
203
|
}
|
|
204
|
+
if (typeof this._kill === 'function' && this._isKill && this._deCompositionElement) {
|
|
205
|
+
this._kill()
|
|
206
|
+
return
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
async beforeUnMount(){
|
|
210
|
+
this._beforeUnMountFunctions.forEach(func => {
|
|
211
|
+
func()
|
|
212
|
+
});
|
|
203
213
|
}
|
|
204
214
|
async unMount(){
|
|
205
215
|
if (this._component && this._pawaElementComponentName === '') {
|
|
@@ -291,16 +301,58 @@ export class PawaElement {
|
|
|
291
301
|
});
|
|
292
302
|
}
|
|
293
303
|
const pawaAttribute=getPawaAttributes()
|
|
304
|
+
const {allowAsProp}=pluginsMap()
|
|
294
305
|
const dependAttribute=getDependentAttribute()
|
|
295
306
|
this._attributes.forEach((attr) => {
|
|
296
|
-
if (
|
|
307
|
+
if (attr.name === 'svg') {
|
|
308
|
+
this._compoToSvg = true
|
|
309
|
+
return
|
|
310
|
+
}else if(attr.name === 'aschild' || attr.name === 'as-child'){
|
|
311
|
+
this._asChild = true
|
|
312
|
+
return
|
|
313
|
+
}
|
|
314
|
+
if (!attr.name.startsWith(':') && (!pawaAttribute.has(attr.name) && !dependAttribute.has(attr.name) )) {
|
|
297
315
|
let name=''
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
316
|
+
if (attr.name.startsWith('-')) {
|
|
317
|
+
name=attr.name.slice(1)
|
|
318
|
+
} else {
|
|
319
|
+
name=attr.name
|
|
320
|
+
}
|
|
321
|
+
const context=this._context
|
|
322
|
+
const setProps=()=>{
|
|
323
|
+
delete this._restProps[name]
|
|
324
|
+
let value=attr.value
|
|
325
|
+
if (value.includes('@{')) {
|
|
326
|
+
const regex = /@{([^}]*)}/g;
|
|
327
|
+
value = value.replace(regex, (match, expression) => {
|
|
328
|
+
if (checkKeywordsExistence(this._staticContext, expression)) {
|
|
329
|
+
return value
|
|
330
|
+
} else {
|
|
331
|
+
const res = this.safeEval(context, expression, 'props', true)
|
|
332
|
+
return res
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
return value
|
|
336
|
+
}else if( attr.name.startsWith('on-') || attr.name.startsWith('out-') || attr.name === 'ref'){
|
|
337
|
+
const res=this.safeEval(context,`(e)=>{
|
|
338
|
+
${attr.value}
|
|
339
|
+
}`, 'props',true)
|
|
340
|
+
return res
|
|
341
|
+
}
|
|
342
|
+
return attr.value
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
if (this._props[name] || name === 'class' && this._props['className'] || name === 'defaultValue' && this._props['defaultValue']) return
|
|
346
|
+
name=name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
347
|
+
if (name === 'class') {
|
|
348
|
+
this._props['className']=setProps
|
|
349
|
+
}else if(name === 'default'){
|
|
350
|
+
this._props['defaultValue']=setProps
|
|
351
|
+
}else{
|
|
352
|
+
this._props[name]=setProps
|
|
302
353
|
}
|
|
303
|
-
|
|
354
|
+
|
|
355
|
+
this._restProps[attr.name]={name:attr.name,value:attr.value}
|
|
304
356
|
}else if(!pawaAttribute.has(attr.name) && attr.name.startsWith(':')){
|
|
305
357
|
|
|
306
358
|
const propsName=attr.name.slice(1)
|
package/power.js
CHANGED
|
@@ -388,7 +388,7 @@ export const For = (el, attr, stateContext,resume=false,notRender,stopResume) =>
|
|
|
388
388
|
|
|
389
389
|
export const ref = (el, attr) => {
|
|
390
390
|
el._checkStatic()
|
|
391
|
-
if (el._running || checkKeywordsExistence(el._staticContext,attr.value)) {
|
|
391
|
+
if (el._running || checkKeywordsExistence(el._staticContext,attr.value) || el._componentName) {
|
|
392
392
|
return
|
|
393
393
|
}
|
|
394
394
|
try {
|
|
@@ -519,26 +519,29 @@ export const documentEvent = (el, attr) => {
|
|
|
519
519
|
const unMount = () => target.removeEventListener(eventType, handler, options);
|
|
520
520
|
el._setUnMount(unMount)
|
|
521
521
|
}
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
522
|
+
|
|
523
|
+
export const exitTransition = (el, attr) => {
|
|
524
|
+
if (el._running || el._componentName) {
|
|
525
|
+
return
|
|
526
|
+
}
|
|
527
|
+
const maxWait = 5000 // 5 seconds max
|
|
528
|
+
const promise = (resolve, startTime = Date.now()) => {
|
|
529
|
+
setTimeout(() => {
|
|
530
|
+
const animations = el.getAnimations({ subtree: false })
|
|
531
|
+
if (animations.length === 0 ) {
|
|
532
|
+
resolve()
|
|
533
|
+
return
|
|
534
|
+
}
|
|
535
|
+
Promise.all(animations.map(a => a.finished))
|
|
536
|
+
.then(() => promise(resolve, startTime))
|
|
537
|
+
.catch(() => promise(resolve, startTime))
|
|
538
|
+
}, 50)
|
|
525
539
|
}
|
|
526
|
-
el._exitAnimation=()=>{
|
|
527
|
-
return new Promise(
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
if (animations.length === 0) {
|
|
531
|
-
resolve()
|
|
532
|
-
return
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
Promise.all(animations.map(a=>a.finished)).then(resolve).catch(resolve)
|
|
536
|
-
})
|
|
537
|
-
})
|
|
538
|
-
}
|
|
539
|
-
el.removeAttribute(attr.name)
|
|
540
|
+
el._exitAnimation = () => {
|
|
541
|
+
return new Promise(promise)
|
|
542
|
+
}
|
|
543
|
+
el.removeAttribute(attr.name)
|
|
540
544
|
}
|
|
541
|
-
|
|
542
545
|
const createTimedExecutable = (el, attr, useInterval) => {
|
|
543
546
|
if (el._running) return;
|
|
544
547
|
const getTime = attr.name.match(/\[(.*?)\]/)[1];
|
package/reactive.js
CHANGED
|
@@ -27,6 +27,10 @@ function scheduleRenderWithTimeBudget() {
|
|
|
27
27
|
|
|
28
28
|
for (const fn of scheduled) {
|
|
29
29
|
const cleanUp = fn();
|
|
30
|
+
if (fn?._sideEffect) {
|
|
31
|
+
const cleared=fn?._sideEffect?.()
|
|
32
|
+
if(typeof cleared === 'function')cleared()
|
|
33
|
+
}
|
|
30
34
|
if (typeof cleanUp === 'function') cleanUp();
|
|
31
35
|
processed.push(fn);
|
|
32
36
|
if (performance.now() - start > FRAME_BUDGET) {
|
|
@@ -75,7 +79,7 @@ export const queueEffect = (effect,depsMap) => {
|
|
|
75
79
|
};
|
|
76
80
|
|
|
77
81
|
// Add parent tracking to effects
|
|
78
|
-
export const createEffect = (fn, el) => {
|
|
82
|
+
export const createEffect = (fn, el,update=null) => {
|
|
79
83
|
const effect = () => {
|
|
80
84
|
activeEffect = effect;
|
|
81
85
|
effect.el = el;
|
|
@@ -86,6 +90,8 @@ export const queueEffect = (effect,depsMap) => {
|
|
|
86
90
|
return cleanUp
|
|
87
91
|
}
|
|
88
92
|
};
|
|
93
|
+
update?.()
|
|
94
|
+
effect._sideEffect=update
|
|
89
95
|
effect._id=crypto.randomUUID()
|
|
90
96
|
effect._done=false
|
|
91
97
|
effect._dep=null
|
|
@@ -117,7 +123,7 @@ if (el) {
|
|
|
117
123
|
// console.log(el,effect._dep);
|
|
118
124
|
}
|
|
119
125
|
|
|
120
|
-
el
|
|
126
|
+
el?._terminateEffects.add(deletes)
|
|
121
127
|
|
|
122
128
|
}
|
|
123
129
|
return effect;
|
|
@@ -131,6 +137,7 @@ export const track = (target, key) => {
|
|
|
131
137
|
|
|
132
138
|
let depsMap = targetMap.get(target);
|
|
133
139
|
if (!depsMap) {
|
|
140
|
+
|
|
134
141
|
targetMap.set(target, (depsMap = new Map()));
|
|
135
142
|
}
|
|
136
143
|
let dep = depsMap.get(key);
|