Feat/update ts 5.4.2 (open-wc#244)

* feat: update ts to version 4.9

* chore: yarn lock

* chore: update ts to 5.4.2 and update browser build

Author: thepassle

package.json

@@ -22,17 +22,12 @@
     "@rocket/cli": "^0.9.6",
     "@rocket/launch": "^0.5.3",
     "@rocket/search": "^0.4.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
     "custom-elements-manifest": "^1.0.0",
-    "esbuild": "^0.12.15",
+    "esbuild": "^0.20.2",
     "globby": "^12.0.2",
     "nodemon": "^2.0.13",
     "request": "^2.88.2",
     "rocket-preset-code-tabs": "^0.2.2",
-    "rollup": "^2.52.8",
-    "rollup-plugin-terser": "^7.0.2",
     "watchexec-bin": "^1.0.0"
   },
   "workspaces": [

packages/analyzer/CHANGELOG.md

@@ -1,3 +1,6 @@
+## Release 0.9.4
+- Updated the internally used TS version to `~5.4.2`. This is a breaking change for plugin authors, because the AST that typescript exposes has changed; specifically for decorators; `node.decorators` no longer exists, but decorators can now be found in `node.modifiers`. There may be other AST changes as well.
+
 ## Release 0.9.3
 - Fix missing type for `initialize` hook
 

packages/analyzer/browser/index.js

@@ -195,7 +195,7 @@
         },
         {
           "kind": "mixin",
-          "description": "Picks up @property decorator on mixins as well",
+          "description": "Picks up property decorator on mixins as well",
           "name": "InputMixin",
           "members": [
             {

packages/analyzer/fixtures/07-plugin-lit/01-basic/fixture/custom-elements.json

@@ -195,7 +195,7 @@
         },
         {
           "kind": "mixin",
-          "description": "Picks up @property decorator on mixins as well",
+          "description": "Picks up property decorator on mixins as well",
           "name": "InputMixin",
           "members": [
             {

packages/analyzer/fixtures/07-plugin-lit/01-basic/output.json

@@ -53,7 +53,7 @@ class MyElement extends LitElement {
 }
 
 /**
- * Picks up @property decorator on mixins as well
+ * Picks up property decorator on mixins as well
  */
 export function InputMixin(superClass) {
   class InputElement extends superClass {

packages/analyzer/fixtures/07-plugin-lit/01-basic/package/my-element.js

@@ -1,6 +1,6 @@
 {
   "name": "@custom-elements-manifest/analyzer",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "prepublishOnly": "npm test && npm run build:browser",
     "start": "nodemon --ignore './custom-elements.json' cem.js analyze --dev --fast",
     "test": "asdgf",
-    "build:browser": "rollup -c rollup.browser.config.js",
+    "build:browser": "esbuild src/browser-entrypoint.js --bundle --format=esm --outfile=browser/index.js",
     "test:watch": "watchexec -w src -w test npm test",
     "update-fixtures": "node scripts/update-version.js --version 1.0.0"
   },
@@ -47,7 +47,7 @@
     "custom-elements-manifest": "1.0.0",
     "debounce": "1.2.1",
     "globby": "11.0.4",
-    "typescript": "~4.3.2"
+    "typescript": "~5.4.2"
   },
   "devDependencies": {},
   "contributors": [

packages/analyzer/package.json

@@ -9,7 +9,7 @@ export function controllerPlugin() {
           /**
            * handle @controller
            */
-          const hasController = node?.decorators?.find(decorator('controller'));
+          const hasController = node?.modifiers?.find(decorator('controller'));
 
           if(hasController) {
             const className = node?.name?.getText();

packages/analyzer/rollup.browser.config.js

@@ -9,7 +9,7 @@ export function controllerPlugin() {
           /**
            * handle @controller
            */
-          const hasController = node?.decorators?.find(decorator('controller'));
+          const hasController = node?.modifiers?.find(decorator('controller'));
 
           if(hasController) {
             const className = node?.name?.getText();

packages/analyzer/src/features/framework-plugins/catalyst-major-2/controller.js

@@ -15,7 +15,7 @@ export function attrDecoratorPlugin(converter) {
            * If a field has the @attr decorator, create an attr from the field in the classDoc
            */
           node?.members?.forEach(member => {
-            const hasAttrDecorator = member?.decorators?.find(decorator('attr'));
+            const hasAttrDecorator = member?.modifiers?.find(decorator('attr'));
             if(hasAttrDecorator) {
               const correspondingField = classDoc?.members?.find(classMember => classMember.name === member.name.getText());
 

packages/analyzer/src/features/framework-plugins/catalyst/controller.js

@@ -11,8 +11,8 @@ export function customElementDecoratorPlugin() {
   return {
     name: 'CORE - CUSTOM-ELEMENT-DECORATOR',
     analyzePhase({node, moduleDoc, context}){
-      if(has(node.decorators)) {
-        const customElementDecorator = node.decorators?.find(decorator('customElement'));
+      if (has(node.modifiers)) {
+        const customElementDecorator = node.modifiers?.find(decorator('customElement'));
 
         if(customElementDecorator) {
           const className = node.name.text;
@@ -27,7 +27,6 @@ export function customElementDecoratorPlugin() {
             },
           };
 
-
           moduleDoc.exports = [...(moduleDoc.exports || []), definitionDoc];
         }
       }

packages/analyzer/src/features/framework-plugins/decorators/attr.js

@@ -49,7 +49,7 @@ function handlePropertyDecorator(classNode, moduleDoc, mixinName = null) {
    */
   classNode?.members?.forEach(member => {
     if (hasPropertyDecorator(member)) {
-      const propertyDecorator = member.decorators.find(decorator('property'));
+      const propertyDecorator = member.modifiers.find(decorator('property'));
       const propertyOptions = propertyDecorator?.expression?.arguments?.find(arg => ts.isObjectLiteralExpression(arg));
 
       /**

packages/analyzer/src/features/framework-plugins/decorators/custom-element-decorator.js

@@ -50,7 +50,7 @@ export function getAttributeName(node) {
 }
 
 export function hasPropertyDecorator(node) {
-  return node?.decorators?.some((decorator) => { 
+  return node?.modifiers?.some((decorator) => { 
     return ts.isDecorator(decorator) && decorator?.expression?.expression?.getText() === 'property'
   });
 }

packages/analyzer/src/features/framework-plugins/lit/property-decorator.js

@@ -15,7 +15,7 @@ export function stencilPlugin() {
            * Add tagName to classDoc, extracted from `@Component({tag: 'foo-bar'})` decorator
            * Add custom-element-definition to exports
            */ 
-          const componentDecorator = node?.decorators?.find(decorator('Component'))?.expression;
+          const componentDecorator = node?.modifiers?.find(decorator('Component'))?.expression;
 
           const tagName = componentDecorator?.arguments?.[0]?.properties?.find(prop => {
             return prop?.name?.getText() === 'tag'
@@ -39,9 +39,9 @@ export function stencilPlugin() {
            * Collect fields with `@Event()` decorator so we can process them in `moduleLinkPhase`
            */ 
           const eventFields = node?.members
-            ?.filter(member => member?.decorators?.find(decorator('Event')))
+            ?.filter(member => member?.modifiers?.find(decorator('Event')))
             ?.map(member => {
-              const eventDecorator = member?.decorators?.find(decorator('Event'));
+              const eventDecorator = member?.modifiers?.find(decorator('Event'));
               const eventName = eventDecorator?.expression?.arguments?.[0]?.properties?.find(prop => {
                 return prop?.name?.getText() === 'eventName'
               })?.initializer?.text;
@@ -58,13 +58,13 @@ export function stencilPlugin() {
            * - add fieldName to attr
            */
           node?.members
-            ?.filter(member => member?.decorators?.find(decorator('Prop')))
+            ?.filter(member => member?.modifiers?.find(decorator('Prop')))
             ?.forEach(property => {
               const fieldName = property?.name?.text;
-              const attrNameFromDecorator = property?.decorators?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'attribute')?.initializer?.text;
+              const attrNameFromDecorator = property?.modifiers?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'attribute')?.initializer?.text;
               const attrName = attrNameFromDecorator || toKebabCase(property?.name?.text);
 
-              const reflects = property?.decorators?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'reflects')?.initializer?.getText?.() === 'true';
+              const reflects = property?.modifiers?.[0]?.expression?.arguments?.[0]?.properties?.find(prop => prop?.name?.getText() === 'reflects')?.initializer?.getText?.() === 'true';
               const member = currClass?.members?.find(mem => mem?.name === fieldName);
               if(reflects) {
                 member.reflects = true;

packages/analyzer/src/features/framework-plugins/lit/utils.js

@@ -1,13 +1,15 @@
+import ts from 'typescript';
+
 /**
  * GENERAL UTILITIES
  */
 
 export const has = arr => Array.isArray(arr) && arr.length > 0;
 
 /**
- * @example node?.decorators?.find(decorator('Component'))
+ * @example node?.modifiers?.find(decorator('Component'))
  */
-export const decorator = type => decorator => decorator?.expression?.expression?.getText() === type || decorator?.expression?.getText() === type;
+export const decorator = type => decorator => ts.isDecorator(decorator) && decorator?.expression?.expression?.getText() === type || decorator?.expression?.getText() === type;
 
 export function isBareModuleSpecifier(specifier) {
   return !!specifier?.replace(/'/g, '')[0].match(/[@a-zA-Z]/g);