@webflow/webflow-cli 1.6.9 → 1.6.11

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/README.md

@@ -9,9 +9,10 @@ $ npm run dev
 ```
 
 The above command does a few things:
-* Installs dependencies
-* Watches for changes in the `src/` folder and recompiles your TypeScript files, outputting an `index.js` file under the `public/` folder
-* Spins up a process that serves your extension files from under `public/`
+
+- Installs dependencies
+- Watches for changes in the `src/` folder and recompiles your TypeScript files, outputting an `index.js` file under the `public/` folder
+- Spins up a process that serves your extension files from under `public/`
 
 The command outputs the URL under which your extension is being served. Use this as the “Development URL” for your app in the Webflow Designer’s Apps panel. You can then launch the extension from the same place.
 

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/README.md

@@ -16,4 +16,4 @@ This command installs dependencies, watches for changes in the `src/` folder, an
 npm run build
 ```
 
-This command prepares a `${bundleFile}` in the `./dist/` folder. Upload this `bundle.zip` file for distributing the App inside of your workspace or via the Marketplace.
+This command prepares a `${bundleFile}` in the `./dist/` folder. Upload this `bundle.zip` file for distributing the App inside of your workspace or via the Marketplace.

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.",
+        "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.9",
+  "version": "1.6.11",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {
     "webflow": "./dist/index.js"