@webflow/webflow-cli 1.20.0 → 1.20.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @webflow/webflow-cli
 
+## 1.20.1
+
+### Patch Changes
+
+- f5355d1: Changed default extension for component files to jsx, when using deprecated webflow devlink sync. File extension still can be configured using fileExtensions property in manifest file.
+- 08f6430: The "webflow cloud init" command has been updated to use the new "webflow devlink export" command. The Astro and next.js scaffolds has also been updated to make use of new DevLink features.
+
 ## 1.20.0
 
 ### Minor Changes

package/dist/cloud-scaffolds/astro/README.md

@@ -1,20 +1,44 @@
-# Astro Starter Kit: Basics
+# Webflow Cloud + Astro
 
-```sh
-npm create astro@latest -- --template basics
+This is an [Astro](https://astro.build) project bootstrapped with [`webflow cloud init`](https://developers.webflow.com/webflow-cloud/intro).
+
+## Getting Started
+
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, export your Webflow components:
+
+```bash
+webflow devlink export
+```
+
+This will create the `webflow/` directory with your Webflow components and styles.
+
+Finally, run the development server:
+
+```bash
+npm run dev
 ```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+Open [http://localhost:4321](http://localhost:4321) with your browser to see the result.
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+You can start editing the page by modifying `src/pages/index.astro`. The page auto-updates as you edit the file.
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+## Webflow Components
 
-## 🚀 Project Structure
+Your Webflow components are exported to `webflow/`. To update them when you make changes in Webflow:
 
-Inside of your Astro project, you'll see the following folders and files:
+```bash
+webflow devlink export
+```
+
+Learn more about [Webflow DevLink](https://developers.webflow.com/data/docs/devlink-overview).
+
+## Project Structure
 
 ```text
 /
@@ -25,12 +49,11 @@ Inside of your Astro project, you'll see the following folders and files:
 │   │   └── Layout.astro
 │   └── pages/
 │       └── index.astro
-└── package.json
+├── webflow/              # Webflow components (generated)
+└── webflow.json          # Webflow configuration
 ```
 
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
-
-## 🧞 Commands
+## Commands
 
 All commands are run from the root of the project, from a terminal:
 
@@ -42,7 +65,12 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview`         | Preview your build locally, before deploying     |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
+| `webflow devlink export`  | Export Webflow components to `webflow/`          |
+| `webflow cloud deploy`    | Deploy to Webflow Cloud                          |
 
-## 👀 Want to learn more?
+## Learn More
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+- [Webflow Cloud Documentation](https://developers.webflow.com/webflow-cloud/intro)
+- [Webflow DevLink Documentation](https://developers.webflow.com/data/docs/devlink-overview)
+- [Astro Documentation](https://docs.astro.build)
+- [Astro Discord](https://astro.build/chat)

package/dist/cloud-scaffolds/astro/src/env.d.ts

@@ -4,3 +4,9 @@ type Runtime = import("@astrojs/cloudflare").Runtime<Env>;
 declare namespace App {
   interface Locals extends Runtime {}
 }
+
+// Webflow CSS imports
+declare module "../../webflow/css/global.css" {
+  const content: string;
+  export default content;
+}

package/dist/cloud-scaffolds/astro/src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
-import { DevLinkProvider } from '../../devlink/DevLinkProvider.js';
-import "../../devlink/css/global.css"; // Webflow Styles
+import { DevLinkProvider } from '../../webflow/DevLinkProvider.js';
+import "../../webflow/css/global.css"; // Webflow Styles
 ---
 
 <!doctype html>

package/dist/cloud-scaffolds/astro/src/pages/index.astro

@@ -1,62 +1,68 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
+
+// Import DevLink components from "../../webflow/*"
+// import { ComponentName } from "../../webflow/ComponentName";
 ---
 
 <Layout>
-  <Section
-    client:load
-    tag="section"
-    className="margin-bottom-24px"
-    style={{
-      minHeight: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  >
-    <Container>
-      <Block
-        tag="div"
-        className="hero-split"
-        style={{
-          textAlign: 'center',
-          maxWidth: '600px',
-          margin: '0 auto'
-        }}
-      >
-        <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
-        <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
-        <div style={{marginTop: '12px'}}>
-          <Link
-            button={true}
-            options={{
-              href: "https://developers.webflow.com/webflow-cloud/getting-started"
-            }}
-            className="button-primary"
+  <section class="hero-section">
+    <div class="container">
+      <div class="hero-content">
+        <h1 class="hero-title">Welcome to Webflow Cloud</h1>
+        <p class="hero-description">Your Astro project is ready. Start building and sync your Webflow components and design system.</p>
+        <div class="hero-cta">
+          <a
+            href="https://developers.webflow.com/data-clients/docs/getting-started"
+            class="button-primary"
           >
             Get Started
-          </Link>
+          </a>
         </div>
-      </Block>
-    </Container>
-  </Section>
+      </div>
+    </div>
+  </section>
 </Layout>
 
 <style>
-  h1 {
+  .hero-section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-content {
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .hero-title {
     font-size: 2.5rem;
     font-weight: 700;
+    margin-bottom: 1.5rem;
     background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
 
+  .hero-description {
+    margin-bottom: 1.5rem;
+  }
+
+  .hero-cta {
+    margin-top: 0.75rem;
+  }
+
   .button-primary {
+    display: inline-block;
+    padding: 12px 24px;
     border-radius: 4px;
     background: #146ef5;
     color: #ffffff;
+    text-decoration: none;
     box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
   }
 

package/dist/cloud-scaffolds/astro/webflow.json

@@ -2,11 +2,12 @@
   "cloud": {
     "framework": "astro"
   },
-  "devlink": {
-    "rootDir": "./devlink",
-    "cssModules": true,
-    "fileExtensions": {
-      "js": "jsx"
-    }
+  "devlink-export": {
+    "rootDir": "./webflow",
+    "components": ".*",
+    "componentGroups": ".*",
+    "ts": false,
+    "cssScopes": true,
+    "relativeHrefRoot": "/"
   }
 }

package/dist/cloud-scaffolds/nextjs/README.md

@@ -2,7 +2,21 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`webflow clou
 
 ## Getting Started
 
-First, run the development server:
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, export your Webflow components:
+
+```bash
+webflow devlink export
+```
+
+This will create the `src/webflow/` directory with your Webflow components and styles.
+
+Finally, run the development server:
 
 ```bash
 npm run dev
@@ -12,4 +26,22 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-You can deploy your app by running [`webflow cloud deploy`](https://developers.webflow.com/webflow-cloud/environment).
+## Webflow Components
+
+Your Webflow components are exported to `src/webflow/`. To update them when you make changes in Webflow:
+
+```bash
+webflow devlink export
+```
+
+Learn more about [Webflow DevLink](https://developers.webflow.com/data/docs/devlink-overview).
+
+## Deployment
+
+Deploy your app by running:
+
+```bash
+webflow cloud deploy
+```
+
+Learn more about [Webflow Cloud deployment](https://developers.webflow.com/webflow-cloud/environment).

package/dist/cloud-scaffolds/nextjs/eslint.config.mjs

@@ -11,7 +11,12 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-  { ignorePatterns: ["**/devlink/**"] },
+  {
+    ignores: [
+      "**/webflow/**",
+      "**/webflow-*/**",
+    ],
+  },
 ];
 
 export default eslintConfig;

package/dist/cloud-scaffolds/nextjs/src/app/globals.css

@@ -2,7 +2,7 @@
 @layer properties, theme, base, webflow, components, utilities;
 
 /* Webflow global styles are imported in the 'webflow' layer */
-@import "../devlink/css/global.css" layer(webflow);
+@import "../webflow/css/global.css" layer(webflow);
 @import "tailwindcss";
 
 :root {

package/dist/cloud-scaffolds/nextjs/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
-import { DevLinkProvider } from "@/devlink/DevLinkProvider";
+import { DevLinkProvider } from "@/webflow/DevLinkProvider";
 
 const inter = Inter({
   subsets: ["latin"],

package/dist/cloud-scaffolds/nextjs/src/app/page.css

@@ -0,0 +1,45 @@
+.hero-section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-bottom: 1.5rem;
+}
+
+.hero-cta {
+  margin-top: 0.75rem;
+}
+
+.button-primary {
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background: #146ef5;
+  color: #ffffff;
+  text-decoration: none;
+  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
+}
+
+.button-primary:hover {
+  background: #2c80fd;
+  color: #ffffff;
+}

package/dist/cloud-scaffolds/nextjs/src/app/page.tsx

@@ -1,64 +1,30 @@
 "use client";
 
-import { Section, Block, Link } from "@/devlink/_Builtin";
+import "./page.css";
+
+// Import DevLink components from "@/webflow/*"
+// import { ComponentName } from "@/webflow/ComponentName";
 
 export default function Home() {
   return (
-    <Section
-      tag="section"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Block tag="div" className="container">
-        <Block
-          tag="div"
-          className="hero-split"
-          style={{
-            textAlign: "center",
-            maxWidth: "600px",
-            margin: "0 auto",
-          }}
-        >
-          <h1
-            className="margin-bottom-24px"
-            style={{
-              fontSize: "2.5rem",
-              fontWeight: 700,
-              background: "linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-              backgroundClip: "text",
-            }}
-          >
-            Welcome to Webflow Cloud
-          </h1>
-          <Block tag="p" className="margin-bottom-24px">
-            This is a simple test using Basic components with enhanced styling.
-          </Block>
-          <div style={{ marginTop: "12px" }}>
-            <Link
-              button={true}
-              options={{
-                href: "https://developers.webflow.com/webflow-cloud/getting-started",
-              }}
+    <section className="hero-section">
+      <div className="container">
+        <div className="hero-content">
+          <h1 className="hero-title">Welcome to Webflow Cloud</h1>
+          <p className="hero-description">
+            Your Next.js project is ready. Start building and sync your Webflow
+            components and design system.
+          </p>
+          <div className="hero-cta">
+            <a
+              href="https://developers.webflow.com/data-clients/docs/getting-started"
               className="button-primary"
-              style={{
-                borderRadius: "4px",
-                background: "#146ef5",
-                color: "#ffffff",
-                boxShadow:
-                  "0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2)",
-              }}
             >
               Get Started
-            </Link>
+            </a>
           </div>
-        </Block>
-      </Block>
-    </Section>
+        </div>
+      </div>
+    </section>
   );
 }

package/dist/cloud-scaffolds/nextjs/src/webflow.d.ts

@@ -0,0 +1,14 @@
+// Webflow component and CSS type declarations
+// These modules will be created by 'webflow devlink export'
+
+// CSS module declarations
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}
+
+// Webflow component modules
+declare module "@/webflow/webflow_modules/*" {
+  const Component: any;
+  export default Component;
+}

package/dist/cloud-scaffolds/nextjs/webflow.json

@@ -2,8 +2,12 @@
   "cloud": {
     "framework": "nextjs"
   },
-  "devlink": {
-    "rootDir": "./src/devlink",
-    "cssModules": true
+  "devlink-export": {
+    "rootDir": "./src/webflow",
+    "components": ".*",
+    "componentGroups": ".*",
+    "ts": true,
+    "cssScopes": true,
+    "relativeHrefRoot": "/"
   }
 }