@zessjs/compiler 1.1.1 → 1.1.4

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.
Files changed (4) hide show
  1. package/README.md +10 -10
  2. package/dist/compiler.cjs +46 -37
  3. package/dist/compiler.js +46 -37
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -120,7 +120,7 @@ const element = <div class="container">Hello World</div>
120
120
  const element = (() => {
121
121
  const _el$ = _$createElement('div')
122
122
  _$setAttribute(_el$, 'class', 'container')
123
- _el$.append('Hello World')
123
+ _el$.textContent = 'Hello World'
124
124
  return _el$
125
125
  })()
126
126
  ```
@@ -180,12 +180,12 @@ const fragment = (
180
180
  const fragment = [
181
181
  (() => {
182
182
  const _el$ = _$createElement('span')
183
- _el$.append('First item')
183
+ _el$.textContent = 'First item'
184
184
  return _el$
185
185
  })(),
186
186
  (() => {
187
187
  const _el$2 = _$createElement('span')
188
- _el$2.append('Second item')
188
+ _el$2.textContent = 'Second item'
189
189
  return _el$2
190
190
  })(),
191
191
  ]
@@ -269,12 +269,12 @@ const conditional = (() => {
269
269
  isVisible
270
270
  ? (() => {
271
271
  const _el$2 = _$createElement('span')
272
- _el$2.append('Visible')
272
+ _el$2.textContent = 'Visible'
273
273
  return _el$2
274
274
  })()
275
275
  : (() => {
276
276
  const _el$3 = _$createElement('span')
277
- _el$3.append('Hidden')
277
+ _el$3.textContent = 'Hidden'
278
278
  return _el$3
279
279
  })(),
280
280
  )
@@ -296,7 +296,7 @@ const withClass = <div class={isActive ? 'active' : 'inactive'}>Status</div>
296
296
  const withClass = (() => {
297
297
  const _el$ = _$createElement('div')
298
298
  _$setAttribute(_el$, 'class', isActive ? 'active' : 'inactive')
299
- _el$.append('Status')
299
+ _el$.textContent = 'Status'
300
300
  return _el$
301
301
  })()
302
302
  ```
@@ -320,7 +320,7 @@ const withStyle = (() => {
320
320
  color: 'red',
321
321
  fontSize: '16px',
322
322
  })
323
- _el$.append('Styled Text')
323
+ _el$.textContent = 'Styled Text'
324
324
  return _el$
325
325
  })()
326
326
  ```
@@ -359,7 +359,7 @@ const dynamicAttrs = (() => {
359
359
  ['data-id']: undefined,
360
360
  },
361
361
  )
362
- _el$.append('Dynamic')
362
+ _el$.textContent = 'Dynamic'
363
363
  return _el$
364
364
  })()
365
365
  ```
@@ -383,7 +383,7 @@ const withEvents = (() => {
383
383
  const _el$ = _$createElement('button')
384
384
  _el$.onclick = handleClick
385
385
  _el$.$$mouseenter = handleMouseEnter
386
- _el$.append('Click Me')
386
+ _el$.textContent = 'Click Me'
387
387
  return _el$
388
388
  })()
389
389
  ```
@@ -415,7 +415,7 @@ const withRefs = [
415
415
  const _el$2 = _$createElement('div')
416
416
  const _ref$ = myDiv
417
417
  typeof _ref$ === 'function' ? _$use(_ref$, _el$2) : (myDiv = _el$2)
418
- _el$2.append('Ref Element')
418
+ _el$2.textContent = 'Ref Element'
419
419
  return _el$2
420
420
  })(),
421
421
  ]
package/dist/compiler.cjs CHANGED
@@ -450,8 +450,9 @@ const keywords = new Set([
450
450
  ]);
451
451
  let currentContext;
452
452
  function compile(code, options = {}) {
453
- let prevFunctionParent;
454
- let prevHasThisInFunction;
453
+ let JSXRootNode;
454
+ let prevFunctionScope;
455
+ let prevHasThisInFunctionScope;
455
456
  const ast = (0, meriyah.parse)(code, {
456
457
  jsx: true,
457
458
  next: true,
@@ -485,7 +486,7 @@ function compile(code, options = {}) {
485
486
  const callExpressionPosition = copyPosition(node);
486
487
  expression = createCallExpression(createArrowFunctionExpression(createBlockStatement([...stmts, createReturnStatement(id, callExpressionPosition)], callExpressionPosition), callExpressionPosition), [], callExpressionPosition);
487
488
  }
488
- currentContext.JSXParent ??= expression;
489
+ JSXRootNode ??= expression;
489
490
  this.replace(expression);
490
491
  },
491
492
  JSXFragment(node) {
@@ -493,45 +494,44 @@ function compile(code, options = {}) {
493
494
  currentContext.refId ??= 0;
494
495
  currentContext.thisId ??= 0;
495
496
  const expression = transformFragment(node.children, copyPosition(node.openingFragment));
496
- currentContext.JSXParent ??= expression;
497
+ JSXRootNode ??= expression;
497
498
  this.replace(expression);
498
499
  },
499
500
  FunctionDeclaration(node) {
500
- prevFunctionParent = currentContext.functionParent;
501
- prevHasThisInFunction = currentContext.hasThisInFunction;
502
- currentContext.functionParent = node;
503
- currentContext.hasThisInFunction = false;
501
+ prevFunctionScope = currentContext.functionScope;
502
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
503
+ currentContext.functionScope = node;
504
+ currentContext.hasThisInFunctionScope = false;
504
505
  },
505
506
  FunctionExpression(node) {
506
507
  if (currentContext.generatedFunctions.has(node)) currentContext.generatedFunctions.delete(node);
507
508
  else {
508
- prevFunctionParent = currentContext.functionParent;
509
- prevHasThisInFunction = currentContext.hasThisInFunction;
510
- currentContext.functionParent = node;
511
- currentContext.hasThisInFunction = false;
509
+ prevFunctionScope = currentContext.functionScope;
510
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
511
+ currentContext.functionScope = node;
512
+ currentContext.hasThisInFunctionScope = false;
512
513
  }
513
514
  },
514
- ArrowFunctionExpression(node, parent, key) {
515
- if (parent?.type === "PropertyDefinition" && key === "value") {
516
- prevFunctionParent = currentContext.functionParent;
517
- prevHasThisInFunction = currentContext.hasThisInFunction;
518
- currentContext.functionParent = node;
519
- currentContext.hasThisInFunction = false;
515
+ PropertyDefinition(node) {
516
+ if (node.value) {
517
+ prevFunctionScope = currentContext.functionScope;
518
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
519
+ currentContext.functionScope = node;
520
+ currentContext.hasThisInFunctionScope = false;
520
521
  }
521
522
  },
522
523
  ThisExpression(node) {
523
- const expression = transformThisExpression(node);
524
- if (expression) this.replace(expression);
524
+ if (JSXRootNode) this.replace(transformThisExpression(node));
525
525
  },
526
526
  exit(node) {
527
- if (node === currentContext.functionParent) {
528
- currentContext.functionParent = prevFunctionParent;
529
- currentContext.hasThisInFunction = prevHasThisInFunction;
530
- } else if (node === currentContext.JSXParent) {
527
+ if (node === currentContext.functionScope) {
528
+ currentContext.functionScope = prevFunctionScope;
529
+ currentContext.hasThisInFunctionScope = prevHasThisInFunctionScope;
530
+ } else if (node === JSXRootNode) {
531
531
  currentContext.JSXId = void 0;
532
532
  currentContext.refId = void 0;
533
533
  currentContext.thisId = void 0;
534
- currentContext.JSXParent = void 0;
534
+ JSXRootNode = void 0;
535
535
  }
536
536
  }
537
537
  });
@@ -635,25 +635,34 @@ function transformFragment(children, position, isInComponent) {
635
635
  if (!isInComponent) return createArrayExpression(elements, position);
636
636
  }
637
637
  function transformThisExpression(node) {
638
- if (!currentContext.JSXParent) return;
639
638
  const thisId = createIdentifier(getUniqueId("self", "thisId"), copyPosition(node));
640
- if (!currentContext.functionParent) {
641
- if (currentContext.hasThisInProgram) return thisId;
639
+ if (!currentContext.functionScope) {
640
+ if (currentContext.hasThisInGlobalScope) return thisId;
642
641
  const { body } = currentContext.ast;
643
642
  const programPosition = copyPosition(currentContext.ast);
644
- currentContext.hasThisInProgram = true;
643
+ currentContext.hasThisInGlobalScope = true;
645
644
  for (let i = 0; i < body.length; ++i) {
646
645
  if (body[i].type === "ImportDeclaration") continue;
647
646
  body.splice(i, 0, createVariableDeclaration(thisId, createIdentifier("globalThis", programPosition), programPosition));
648
647
  break;
649
648
  }
650
- } else if (!currentContext.hasThisInFunction) {
651
- const functionPosition = copyPosition(currentContext.functionParent);
652
- const block = currentContext.functionParent.body;
653
- const declaration = createVariableDeclaration(thisId, createThisExpression(functionPosition), functionPosition);
654
- currentContext.hasThisInFunction = true;
655
- if (block.type === "BlockStatement") block.body.unshift(declaration);
656
- else currentContext.functionParent.body = createBlockStatement([declaration, createReturnStatement(block, copyPosition(block))], functionPosition);
649
+ } else if (!currentContext.hasThisInFunctionScope) {
650
+ let block;
651
+ let functionScopePosition;
652
+ if (currentContext.functionScope.type === "PropertyDefinition") {
653
+ const { value } = currentContext.functionScope;
654
+ functionScopePosition = copyPosition(value);
655
+ if (value.type !== "ArrowFunctionExpression") {
656
+ block = createBlockStatement([createReturnStatement(value, functionScopePosition)], functionScopePosition);
657
+ currentContext.functionScope.value = createCallExpression(createArrowFunctionExpression(block, functionScopePosition), [], functionScopePosition);
658
+ } else if (value.body.type === "BlockStatement") block = value.body;
659
+ else value.body = block = createBlockStatement([createReturnStatement(value.body, functionScopePosition)], functionScopePosition);
660
+ } else {
661
+ block = currentContext.functionScope.body;
662
+ functionScopePosition = copyPosition(currentContext.functionScope);
663
+ }
664
+ currentContext.hasThisInFunctionScope = true;
665
+ block.body.unshift(createVariableDeclaration(thisId, createThisExpression(functionScopePosition), functionScopePosition));
657
666
  }
658
667
  return thisId;
659
668
  }
@@ -1015,7 +1024,7 @@ function transformChildren(children, id) {
1015
1024
  }
1016
1025
  }
1017
1026
  if (textContent) elements.push(createLiteral(decodeText(textContent), textPosition));
1018
- if (elements.length) stmts.push(createExpressionStatement(createCallExpression(createMemberExpression(id, createIdentifier("append", elementsPosition), false, elementsPosition), elements, elementsPosition), elementsPosition));
1027
+ if (elements.length) stmts.push(createExpressionStatement(!stmts.length && elements.length === 1 && textContent ? createAssignmentExpression(createMemberExpression(id, createIdentifier("textContent", elementsPosition), false, elementsPosition), elements[0], elementsPosition) : createCallExpression(createMemberExpression(id, createIdentifier("append", elementsPosition), false, elementsPosition), elements, elementsPosition), elementsPosition));
1019
1028
  return stmts;
1020
1029
  }
1021
1030
  function transformProperties(attrs, children, position) {
package/dist/compiler.js CHANGED
@@ -422,8 +422,9 @@ const keywords = new Set([
422
422
  ]);
423
423
  let currentContext;
424
424
  function compile(code, options = {}) {
425
- let prevFunctionParent;
426
- let prevHasThisInFunction;
425
+ let JSXRootNode;
426
+ let prevFunctionScope;
427
+ let prevHasThisInFunctionScope;
427
428
  const ast = parse(code, {
428
429
  jsx: true,
429
430
  next: true,
@@ -457,7 +458,7 @@ function compile(code, options = {}) {
457
458
  const callExpressionPosition = copyPosition(node);
458
459
  expression = createCallExpression(createArrowFunctionExpression(createBlockStatement([...stmts, createReturnStatement(id, callExpressionPosition)], callExpressionPosition), callExpressionPosition), [], callExpressionPosition);
459
460
  }
460
- currentContext.JSXParent ??= expression;
461
+ JSXRootNode ??= expression;
461
462
  this.replace(expression);
462
463
  },
463
464
  JSXFragment(node) {
@@ -465,45 +466,44 @@ function compile(code, options = {}) {
465
466
  currentContext.refId ??= 0;
466
467
  currentContext.thisId ??= 0;
467
468
  const expression = transformFragment(node.children, copyPosition(node.openingFragment));
468
- currentContext.JSXParent ??= expression;
469
+ JSXRootNode ??= expression;
469
470
  this.replace(expression);
470
471
  },
471
472
  FunctionDeclaration(node) {
472
- prevFunctionParent = currentContext.functionParent;
473
- prevHasThisInFunction = currentContext.hasThisInFunction;
474
- currentContext.functionParent = node;
475
- currentContext.hasThisInFunction = false;
473
+ prevFunctionScope = currentContext.functionScope;
474
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
475
+ currentContext.functionScope = node;
476
+ currentContext.hasThisInFunctionScope = false;
476
477
  },
477
478
  FunctionExpression(node) {
478
479
  if (currentContext.generatedFunctions.has(node)) currentContext.generatedFunctions.delete(node);
479
480
  else {
480
- prevFunctionParent = currentContext.functionParent;
481
- prevHasThisInFunction = currentContext.hasThisInFunction;
482
- currentContext.functionParent = node;
483
- currentContext.hasThisInFunction = false;
481
+ prevFunctionScope = currentContext.functionScope;
482
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
483
+ currentContext.functionScope = node;
484
+ currentContext.hasThisInFunctionScope = false;
484
485
  }
485
486
  },
486
- ArrowFunctionExpression(node, parent, key) {
487
- if (parent?.type === "PropertyDefinition" && key === "value") {
488
- prevFunctionParent = currentContext.functionParent;
489
- prevHasThisInFunction = currentContext.hasThisInFunction;
490
- currentContext.functionParent = node;
491
- currentContext.hasThisInFunction = false;
487
+ PropertyDefinition(node) {
488
+ if (node.value) {
489
+ prevFunctionScope = currentContext.functionScope;
490
+ prevHasThisInFunctionScope = currentContext.hasThisInFunctionScope;
491
+ currentContext.functionScope = node;
492
+ currentContext.hasThisInFunctionScope = false;
492
493
  }
493
494
  },
494
495
  ThisExpression(node) {
495
- const expression = transformThisExpression(node);
496
- if (expression) this.replace(expression);
496
+ if (JSXRootNode) this.replace(transformThisExpression(node));
497
497
  },
498
498
  exit(node) {
499
- if (node === currentContext.functionParent) {
500
- currentContext.functionParent = prevFunctionParent;
501
- currentContext.hasThisInFunction = prevHasThisInFunction;
502
- } else if (node === currentContext.JSXParent) {
499
+ if (node === currentContext.functionScope) {
500
+ currentContext.functionScope = prevFunctionScope;
501
+ currentContext.hasThisInFunctionScope = prevHasThisInFunctionScope;
502
+ } else if (node === JSXRootNode) {
503
503
  currentContext.JSXId = void 0;
504
504
  currentContext.refId = void 0;
505
505
  currentContext.thisId = void 0;
506
- currentContext.JSXParent = void 0;
506
+ JSXRootNode = void 0;
507
507
  }
508
508
  }
509
509
  });
@@ -607,25 +607,34 @@ function transformFragment(children, position, isInComponent) {
607
607
  if (!isInComponent) return createArrayExpression(elements, position);
608
608
  }
609
609
  function transformThisExpression(node) {
610
- if (!currentContext.JSXParent) return;
611
610
  const thisId = createIdentifier(getUniqueId("self", "thisId"), copyPosition(node));
612
- if (!currentContext.functionParent) {
613
- if (currentContext.hasThisInProgram) return thisId;
611
+ if (!currentContext.functionScope) {
612
+ if (currentContext.hasThisInGlobalScope) return thisId;
614
613
  const { body } = currentContext.ast;
615
614
  const programPosition = copyPosition(currentContext.ast);
616
- currentContext.hasThisInProgram = true;
615
+ currentContext.hasThisInGlobalScope = true;
617
616
  for (let i = 0; i < body.length; ++i) {
618
617
  if (body[i].type === "ImportDeclaration") continue;
619
618
  body.splice(i, 0, createVariableDeclaration(thisId, createIdentifier("globalThis", programPosition), programPosition));
620
619
  break;
621
620
  }
622
- } else if (!currentContext.hasThisInFunction) {
623
- const functionPosition = copyPosition(currentContext.functionParent);
624
- const block = currentContext.functionParent.body;
625
- const declaration = createVariableDeclaration(thisId, createThisExpression(functionPosition), functionPosition);
626
- currentContext.hasThisInFunction = true;
627
- if (block.type === "BlockStatement") block.body.unshift(declaration);
628
- else currentContext.functionParent.body = createBlockStatement([declaration, createReturnStatement(block, copyPosition(block))], functionPosition);
621
+ } else if (!currentContext.hasThisInFunctionScope) {
622
+ let block;
623
+ let functionScopePosition;
624
+ if (currentContext.functionScope.type === "PropertyDefinition") {
625
+ const { value } = currentContext.functionScope;
626
+ functionScopePosition = copyPosition(value);
627
+ if (value.type !== "ArrowFunctionExpression") {
628
+ block = createBlockStatement([createReturnStatement(value, functionScopePosition)], functionScopePosition);
629
+ currentContext.functionScope.value = createCallExpression(createArrowFunctionExpression(block, functionScopePosition), [], functionScopePosition);
630
+ } else if (value.body.type === "BlockStatement") block = value.body;
631
+ else value.body = block = createBlockStatement([createReturnStatement(value.body, functionScopePosition)], functionScopePosition);
632
+ } else {
633
+ block = currentContext.functionScope.body;
634
+ functionScopePosition = copyPosition(currentContext.functionScope);
635
+ }
636
+ currentContext.hasThisInFunctionScope = true;
637
+ block.body.unshift(createVariableDeclaration(thisId, createThisExpression(functionScopePosition), functionScopePosition));
629
638
  }
630
639
  return thisId;
631
640
  }
@@ -987,7 +996,7 @@ function transformChildren(children, id) {
987
996
  }
988
997
  }
989
998
  if (textContent) elements.push(createLiteral(decodeText(textContent), textPosition));
990
- if (elements.length) stmts.push(createExpressionStatement(createCallExpression(createMemberExpression(id, createIdentifier("append", elementsPosition), false, elementsPosition), elements, elementsPosition), elementsPosition));
999
+ if (elements.length) stmts.push(createExpressionStatement(!stmts.length && elements.length === 1 && textContent ? createAssignmentExpression(createMemberExpression(id, createIdentifier("textContent", elementsPosition), false, elementsPosition), elements[0], elementsPosition) : createCallExpression(createMemberExpression(id, createIdentifier("append", elementsPosition), false, elementsPosition), elements, elementsPosition), elementsPosition));
991
1000
  return stmts;
992
1001
  }
993
1002
  function transformProperties(attrs, children, position) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zessjs/compiler",
3
- "version": "1.1.1",
3
+ "version": "1.1.4",
4
4
  "description": "Zess JSX compiler 💥 Delivers efficient code conversion for super - responsive web experiences.",
5
5
  "type": "module",
6
6
  "keywords": [