@webflow/webflow-cli 1.6.10 → 1.6.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @webflow/webflow-cli
 
+## 1.6.11
+
+### Patch Changes
+
+- Updating Designer Extension templates and adding ESLint configs
+
 ## 1.6.10
 
 ### Patch Changes

package/dist/scaffolds/default/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "promise"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      { "checksVoidReturn": false }
+    ],
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-async-promise-executor": "error",
+    "require-await": "error",
+    "promise/catch-or-return": "error"
+  }
+}

package/dist/scaffolds/default/package.json

@@ -5,11 +5,17 @@
   "main": "index.js",
   "scripts": {
     "build": "npm install && tsc -p tsconfig.json && webflow extension bundle",
-    "dev": "npm install && concurrently -r \"webflow extension serve\" \"tsc -p tsconfig.json --watch --preserveWatchOutput\""
+    "dev": "npm install && concurrently -r \"webflow extension serve\" \"tsc -p tsconfig.json --watch --preserveWatchOutput\"",
+    "lint": "eslint . --ext .ts"
   },
   "devDependencies": {
-    "@webflow/designer-extension-typings": "*",
-    "concurrently": "*",
-    "typescript": "*"
+    "@webflow/designer-extension-typings": "^0.2.0-beta.8",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "eslint": "^8.5.7",
+    "concurrently": "^8.2.2",
+    "typescript": "^5.4.5",
+    "eslint-plugin-promise": "^6.1.1"
   }
 }
+

package/dist/scaffolds/default/src/index.ts

@@ -11,12 +11,11 @@ addButtonListeners();
 
 document.getElementById("extension-form").onsubmit = async (event) => {
   event.preventDefault();
-
   // Get the current selected Element
   const el = await webflow.getSelectedElement();
 
   // If styles can be set on the Element
-  if (el && el.styles && el.configurable && el.children) {
+  if (el && el.styles && el.children) {
     //Get current element's style
     const currentStyle = await el.getStyles();
 
@@ -24,12 +23,10 @@ document.getElementById("extension-form").onsubmit = async (event) => {
     const emojiStyle = await createOrUseStyle("emoji-style");
 
     // Create a new element that will display the text-emoji
-    const labelElement = await webflow.createDOM("span");
-    labelElement.setStyles([...currentStyle, emojiStyle]);
-    labelElement.setTextContent(selectedEmoji);
-
-    el.setChildren([...el.getChildren(), labelElement]);
-    await el.save();
+    const labelElement = await el.append(webflow.elementPresets.DOM);
+    await labelElement.setTag("span");
+    await labelElement.setStyles([...currentStyle, emojiStyle]);
+    await labelElement.setTextContent(selectedEmoji);
   } else {
     alert("Please select a text element");
   }
@@ -44,8 +41,8 @@ async function createOrUseStyle(styleName) {
     return style;
   } else {
     // Create a new style, return it
-    const emojiStyle = webflow.createStyle(styleName);
-    emojiStyle.setProperties({ "background-color": "#FF00FF" });
+    const emojiStyle = await webflow.createStyle(styleName);
+    await emojiStyle.setProperties({ "background-color": "#FF00FF" });
     return emojiStyle;
   }
 }

package/dist/scaffolds/default/webflow.json

@@ -1,5 +1,6 @@
 {
   "name": "wf-placeholder-name",
   "publicDir": "public",
-  "size": "default"
+  "size": "default",
+  "apiVersion": "2"
 }

package/dist/scaffolds/react/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "promise"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      { "checksVoidReturn": false }
+    ],
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-async-promise-executor": "error",
+    "require-await": "error",
+    "promise/catch-or-return": "error"
+  }
+}

package/dist/scaffolds/react/package.json

@@ -5,16 +5,27 @@
     "dev": "npm install && concurrently \"webflow extension serve\" \"npm run watch-webpack\"",
     "build": "npm run build-webpack && webflow extension bundle",
     "watch-webpack": "webpack --config webpack.config.mjs --mode development --watch",
-    "build-webpack": "webpack --config webpack.config.mjs --mode production"
+    "build-webpack": "webpack --config webpack.config.mjs --mode production",
+    "lint": "eslint . --ext .ts,.tsx"
   },
   "devDependencies": {
+    "@webflow/designer-extension-typings": "^0.2.0-beta.8",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.5.7",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "typescript": "^5.4.5",
+    "react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@webflow/designer-extension-typings": "*",
-    "concurrently": "*",
     "babel-loader": "^9.1.3",
+    "ts-loader": "^9.5.1",
     "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "eslint-plugin-promise": "^6.1.1"
   },
   "dependencies": {
     "react-dom": "^18.2.0"

package/dist/scaffolds/react/public/index.html

@@ -10,4 +10,4 @@
     <div id="root"></div>
     <script src="./bundle.js"></script>
   </body>
-</html>
+</html>

package/dist/scaffolds/react/src/{main.js → index.tsx}

@@ -1,15 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-const App = () => {
+const App: React.FC = () => {
   const addText = async () => {
     // Get the current selected Element
-    let el = await webflow.getSelectedElement();
+    const el = await webflow.getSelectedElement();
 
     // If text content can be set, update it!
-    if (el && el.configurable && el.setTextContent) {
-      el.setTextContent("hello world!");
-      await el.save();
+    if (el && el.textContent) {
+      await el.setTextContent("hello world!");
     } else {
       alert("Please select a text element");
     }

package/dist/scaffolds/react/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "public",
+    "target": "es6",
+    "lib": ["es6", "dom"],
+    "typeRoots": ["./node_modules/@types", "./node_modules/@webflow"],
+    "jsx": "react",
+    "esModuleInterop": true,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["node_modules/react"],
+      "react-dom": ["node_modules/react-dom"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/dist/scaffolds/react/webflow.json

@@ -1,5 +1,6 @@
 {
   "name": "wf-placeholder-name",
   "publicDir": "public",
-  "size": "default"
+  "size": "default",
+  "apiVersion": "2"
 }

package/dist/scaffolds/react/webpack.config.mjs

@@ -5,19 +5,20 @@ const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
 
 export default {
-  entry: "./src/main.js",
+  entry: "./src/index.tsx",
   output: {
     filename: "bundle.js",
     path: path.resolve(dirname, "public"),
   },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".json"],
+  },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-        },
+        use: "ts-loader",
       },
       {
         test: /\.css$/,

package/dist/scaffolds/typescript-alt/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "promise"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      { "checksVoidReturn": false }
+    ],
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-async-promise-executor": "error",
+    "require-await": "error",
+    "promise/catch-or-return": "error"
+  }
+}

package/dist/scaffolds/typescript-alt/package.json

@@ -5,11 +5,16 @@
   "main": "index.js",
   "scripts": {
     "build": "npm install && tsc -p tsconfig.json && webflow extension bundle",
-    "dev": "npm install && concurrently -r \"webflow extension serve\" \"tsc -p tsconfig.json --watch --preserveWatchOutput\""
+    "dev": "npm install && concurrently -r \"webflow extension serve\" \"tsc -p tsconfig.json --watch --preserveWatchOutput\"",
+    "lint": "eslint . --ext .ts"
   },
   "devDependencies": {
-    "@webflow/designer-extension-typings": "*",
-    "concurrently": "*",
-    "typescript": "*"
+    "@webflow/designer-extension-typings": "^0.2.0-beta.8",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "eslint": "^8.5.7",
+    "concurrently": "^8.2.2",
+    "typescript": "^5.4.5",
+    "eslint-plugin-promise": "^6.1.1"
   }
 }

package/dist/scaffolds/typescript-alt/src/index.ts

@@ -2,10 +2,9 @@ document.getElementById("lorem")!.onsubmit = async (event) => {
   event.preventDefault();
   const el = await webflow.getSelectedElement();
   if (el && el.textContent) {
-    el.setTextContent(
+    await el.setTextContent(
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
         "eiusmod tempor incididunt ut labore et dolore magna aliqua."
     );
-    el.save();
   }
 };

package/dist/scaffolds/typescript-alt/webflow.json

@@ -1,5 +1,6 @@
 {
     "name": "wf-placeholder-name",
     "publicDir": "public",
-    "size": "comfortable"
+    "size": "comfortable",
+    "apiVersion": "2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/webflow-cli",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {
     "webflow": "./dist/index.js"