🔧 Deploy penpot api documentation

✨ Use correct team-id on file-menu on dashboard

.github/workflows/plugins-deploy-api-doc.yml

@@ -0,0 +1,73 @@
+name: Plugins/api-doc deployer
+
+on:
+  push:
+    branches:
+      - develop
+      - staging
+      - main
+    paths:
+      - "plugins/**"
+      - ".github/workflows/deploy-plugin-docs.yml"
+      - "wrangle-penpot-plugins-api-doc.toml"
+  workflow_dispatch:
+    inputs:
+      gh_ref:
+        description: 'Name of the branch or ref'
+        type: string
+        required: true
+        default: 'develop'
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugins
+    steps:
+      - name: Extract some useful variables
+        id: vars
+        run: |
+          echo "gh_ref=${{ inputs.gh_ref || github.ref_name }}" >> $GITHUB_OUTPUT
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ steps.vars.outputs.gh_ref }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: "pnpm"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build docs
+        run: pnpm run build:doc
+
+      - name: Select Worker name
+        run: |
+          REF="${{ steps.vars.outputs.gh_ref }}"
+          case "$REF" in
+            main) echo "WORKER_NAME=penpot-plugins-api-doc-pro" >> $GITHUB_ENV ;;
+            staging) echo "WORKER_NAME=penpot-plugins-api-doc-pre" >> $GITHUB_ENV ;;
+            develop) echo "WORKER_NAME=penpot-plugins-api-doc-hourly" >> $GITHUB_ENV ;;
+            *) echo "Unsupported branch ${REF}" && exit 1 ;;
+          esac
+
+      - name: Deploy to Cloudflare Workers
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy --config wrangle-penpot-plugins-api-doc.toml --name ${{ env.WORKER_NAME }}

.travis.yml

@@ -1,40 +0,0 @@
-dist: xenial
-
-language: generic
-sudo: required
-
-cache:
-  directories:
-    - $HOME/.m2
-
-services:
-  - docker
-
-branches:
-  only:
-    - master
-    - develop
-
-install:
-  - curl -O https://download.clojure.org/install/linux-install-1.10.1.447.sh
-  - chmod +x linux-install-1.10.1.447.sh
-  - sudo ./linux-install-1.10.1.447.sh
-
-before_script:
-  - env | sort
-
-script:
-  - ./manage.sh build-devenv
-  - ./manage.sh run-frontend-tests
-  - ./manage.sh run-backend-tests
-  - ./manage.sh build-images
-  - ./manage.sh run
-
-after_script:
-  - docker images
-
-notifications:
-  email: false
-
-env:
-  - NODE_VERSION=10.16.0

docker/images/docker-compose.yaml

@@ -152,9 +152,9 @@ services:
 
       # AWS_ACCESS_KEY_ID: <KEY_ID>
       # AWS_SECRET_ACCESS_KEY: <ACCESS_KEY>
-      # PENPOT_ASSETS_STORAGE_BACKEND: assets-s3
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
-      # PENPOT_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_S3_BUCKET: <BUKET_NAME>
 
       ## Telemetry. When enabled, a periodical process will send anonymous data about this
       ## instance. Telemetry data will enable us to learn how the application is used,

docs/technical-guide/configuration.md

@@ -114,14 +114,7 @@ configuration.
 The callback has the following format:
 
 ```html
-https://<your_domain>/api/auth/oauth/<oauth_provider>/callback
+https://<your_domain>/api/auth/oidc/callback
-```
-
-You will need to change <your_domain> and <oauth_provider> according to your setup.
-This is how it looks with Gitlab provider:
-
-```html
-https://<your_domain>/api/auth/oauth/gitlab/callback
 ```
 
 #### Google

frontend/package.json

@@ -48,7 +48,7 @@
     "watch:app:main": "clojure -M:dev:shadow-cljs watch main worker storybook",
     "clear:shadow-cache": "rm -rf .shadow-cljs",
     "watch": "exit 0",
-    "watch:app": "yarn run clear:shadow-cache && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
+    "watch:app": "yarn run clear:shadow-cache && yarn run build:wasm && concurrently --kill-others-on-fail \"yarn run watch:app:assets\" \"yarn run watch:app:main\" \"yarn run watch:app:libs\"",
     "watch:storybook": "yarn run build:storybook:assets && concurrently --kill-others-on-fail \"storybook dev -p 6006 --no-open\" \"node ./scripts/watch-storybook.js\""
   },
   "devDependencies": {

frontend/resources/templates/index.mustache

@@ -17,17 +17,18 @@
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
-    <link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
-    <link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
+    <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}
 
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script type="importmap">{{& manifest.importmap }}</script>
 
     <script type="module">
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/rasterizer.mustache

@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Penpot - Rasterizer</title>
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
       globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
     </script>

frontend/resources/templates/render.mustache

@@ -4,10 +4,12 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <title>Penpot - Render</title>
-    <link rel="icon" href="images/favicon.png" />
+
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
 
     <script>
       globalThis.penpotVersion = "{{& version}}";
+      globalThis.penpotVersionTag = "{{& version_tag}}";
       globalThis.penpotBuildDate = "{{& build_date}}";
     </script>
 

frontend/scripts/_helpers.js

@@ -27,9 +27,11 @@ export function startWorker() {
   });
 }
 
-export const isDebug = process.env.NODE_ENV !== "production";
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const BUILD_TS = process.env.BUILD_TS || Date.now();
+export const VERSION = process.env.VERSION || "develop";
+export const VERSION_TAG = process.env.VERSION_TAG || VERSION;
 
 async function findFiles(basePath, predicate, options = {}) {
   predicate =
@@ -172,6 +174,7 @@ export async function watch(baseDir, predicate, callback) {
   const watcher = new Watcher(baseDir, {
     persistent: true,
     recursive: true,
+    debounce: 500
   });
 
   watcher.on("change", (path) => {
@@ -179,8 +182,19 @@ export async function watch(baseDir, predicate, callback) {
       callback(path);
     }
   });
+
+
+  watcher.on("error", (cause) => {
+    console.log("WATCHER ERROR", cause);
+  });
 }
 
+export async function ensureDirectories() {
+  await fs.mkdir("./resources/public/js/worker/", { recursive: true });
+  await fs.mkdir("./resources/public/css/", { recursive: true });
+}
+
+
 async function readManifestFile(resource) {
   const manifestPath = "resources/public/" + resource;
   let content = await fs.readFile(manifestPath, { encoding: "utf8" });
@@ -193,25 +207,25 @@ async function generateManifest() {
     render_main: "./js/render.js",
     rasterizer_main: "./js/rasterizer.js",
 
-    config: "./js/config.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,
 
     importmap: JSON.stringify({
       "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
       }
     })
   };
@@ -222,11 +236,12 @@ async function generateManifest() {
 async function renderTemplate(path, context = {}, partials = {}) {
   const content = await fs.readFile(path, { encoding: "utf-8" });
 
-  const ts = Math.floor(new Date());
-
   context = Object.assign({}, context, {
-    ts: ts,
+    isDebug: IS_DEBUG,
-    isDebug,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
   });
 
   return mustache.render(content, context, partials);
@@ -257,6 +272,9 @@ const markedOptions = {
 marked.use(markedOptions);
 
 export async function compileTranslations() {
+  const outputDir = "resources/public/js/";
+  await fs.mkdir(outputDir, { recursive: true });
+
   const langs = [
     "ar",
     "ca",
@@ -338,7 +356,6 @@ export async function compileTranslations() {
     }
 
     const esm = `export default ${JSON.stringify(result, null, 0)};\n`;
-    const outputDir = "resources/public/js/";
     const outputFile = ph.join(outputDir, "translation." + lang + ".js");
     await fs.writeFile(outputFile, esm);
   }
@@ -390,7 +407,6 @@ async function generateSvgSprites() {
 }
 
 async function generateTemplates() {
-  const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
   const manifest = await generateManifest();
@@ -415,10 +431,7 @@ async function generateTemplates() {
   };
 
   const context = {
-    manifest: manifest,
+    manifest: manifest
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
   };
 
   content = await renderTemplate(
@@ -487,7 +500,7 @@ export async function compileStyles() {
   await fs.mkdir("./resources/public/css", { recursive: true });
   await fs.writeFile("./resources/public/css/main.css", result);
 
-  if (isDebug) {
+  if (IS_DEBUG) {
     let debugCSS = await compileSassDebug(worker);
     await fs.writeFile("./resources/public/css/debug.css", debugCSS);
   }
@@ -500,17 +513,43 @@ export async function compileStyles() {
 export async function compileSvgSprites() {
   const start = process.hrtime();
   log.info("init: compile svgsprite");
-  await generateSvgSprites();
+  let error = false;
+
+  try {
+    await generateSvgSprites();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile svgsprite", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile svgsprite", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile svgsprite", `(${ppt(end)})`);
+  }
 }
 
 export async function compileTemplates() {
   const start = process.hrtime();
+  let error = false;
   log.info("init: compile templates");
-  await generateTemplates();
+
+  try {
+    await generateTemplates();
+  } catch (cause) {
+    error = cause;
+  }
+
   const end = process.hrtime(start);
-  log.info("done: compile templates", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile templates", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile templates", `(${ppt(end)})`);
+  }
 }
 
 export async function compilePolyfills() {

frontend/scripts/_worker.js

@@ -28,14 +28,12 @@ async function compileFile(path) {
         ],
         sourceMap: false,
       });
-      // console.dir(result);
       resolve({
         inputPath: path,
         outputPath: dest,
         css: result.css,
       });
     } catch (cause) {
-      console.error(cause);
       reject(cause);
     }
   });

frontend/scripts/build

@@ -2,26 +2,26 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
+set -ex
+
 export INCLUDE_STORYBOOK=${BUILD_STORYBOOK:-no};
 export INCLUDE_WASM=${BUILD_WASM:-yes};
-export CURRENT_VERSION=$1;
-export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
 export EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS;
-export TS=$(date +%s);
+
+export BUILD_DATE=$(date -R);
+export BUILD_TS=$(date +%s);
+
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 # Some cljs reacts on this environment variable for define more
 # performant code on macros (example: rumext)
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
 
 corepack enable;
 corepack install;
-yarn install || exit 1;
+yarn install;
 
 rm -rf target/dist;
 rm -rf resources/public;
@@ -37,7 +37,7 @@ yarn run build:app:main $EXTRA_PARAMS;
 yarn run build:app:libs;
 yarn run build:app:assets;
 
-sed -i "s/\.\/render.js/.\/render.js?version=$CURRENT_VERSION/g" resources/public/js/worker/main*.js
+sed -i "s/\.\/render.js/.\/render.js?version=$VERSION_TAG/g" resources/public/js/worker/main*.js
 
 rsync -avr resources/public/ target/dist/
 

frontend/scripts/build-app-assets.js

@@ -1,5 +1,6 @@
 import * as h from "./_helpers.js";
 
+await h.ensureDirectories();
 await h.compileStyles();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/scripts/build-storybook

@@ -2,18 +2,16 @@
 # NOTE: this script should be called from the parent directory to
 # properly work.
 
-export CURRENT_VERSION=$1;
+set -ex
+
+export BUILD_TS=$(date +%s);
 export BUILD_DATE=$(date -R);
-export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
+
-export TS=$(date +%s);
+export VERSION=${1:-develop};
+export VERSION_TAG="${VERSION}-${BUILD_TS}";
 
 export NODE_ENV=production;
 
-echo "Current path:"
-echo $PATH
-
-set -ex
-
 corepack enable;
 corepack install || exit 1;
 yarn install || exit 1;

frontend/scripts/watch.js

@@ -12,19 +12,31 @@ let sass = null;
 
 async function compileSassAll() {
   const start = process.hrtime();
+  let error = false;
+
   log.info("init: compile styles");
 
-  sass = await h.compileSassAll(worker);
+  try {
-  let output = await h.concatSass(sass);
+    sass = await h.compileSassAll(worker);
-  await fs.writeFile("./resources/public/css/main.css", output);
+    let output = await h.concatSass(sass);
+    await fs.writeFile("./resources/public/css/main.css", output);
 
-  if (isDebug) {
+    if (isDebug) {
-    let debugCSS = await h.compileSassDebug(worker);
+      let debugCSS = await h.compileSassDebug(worker);
-    await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+      await fs.writeFile("./resources/public/css/debug.css", debugCSS);
+    }
+  } catch (cause) {
+    error = cause;
   }
 
   const end = process.hrtime(start);
-  log.info("done: compile styles", `(${ppt(end)})`);
+
+  if (error) {
+    log.error("error: compile styles", `(${ppt(end)})`);
+    console.error(error);
+  } else {
+    log.info("done: compile styles", `(${ppt(end)})`);
+  }
 }
 
 async function compileSass(path) {
@@ -48,7 +60,7 @@ async function compileSass(path) {
   }
 }
 
-await fs.mkdir("./resources/public/css/", { recursive: true });
+await h.ensureDirectories();
 await compileSassAll();
 await h.copyAssets();
 await h.copyWasmPlayground();

frontend/src/app/config.cljs

@@ -95,6 +95,7 @@
 (def browser              (parse-browser))
 (def platform             (parse-platform))
 
+(def version-tag          (obj/get global "penpotVersionTag"))
 (def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI"))
 (def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI"))
 (def flex-help-uri        (obj/get global "penpotGridHelpURI" "https://help.penpot.app/user-guide/flexible-layouts/"))
@@ -190,9 +191,8 @@
 
 (defn resolve-href
   [resource]
-  (let [version (get version :full)
+  (let [href (-> public-uri
-        href    (-> public-uri
+                 (u/ensure-path-slash)
-                    (u/ensure-path-slash)
+                 (u/join resource)
-                    (u/join resource)
+                 (get :path))]
-                    (get :path))]
+    (str href "?version=" version-tag)))
-    (str href "?version=" version)))

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -27,8 +27,10 @@
    [app.main.data.workspace.colors :as wdc]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.store :as st]
    [app.util.i18n :refer [tr]]
@@ -300,11 +302,20 @@
         update-fn (fn [node _]
                     (-> node
                         (d/txt-merge txt-attrs)
-                        (cty/remove-typography-from-node)))]
+                        (cty/remove-typography-from-node)))
-    (dwsh/update-shapes shape-ids
+        ;; Check if any attribute affects text layout (requires resize)
-                        #(txt/update-text-content % update-node? update-fn nil)
+        affects-layout? (some #(contains? txt-attrs %) [:font-size :font-family :font-weight :letter-spacing :line-height])]
-                        {:ignore-touched true
+    (ptk/reify ::generate-text-shape-update
-                         :page-id page-id})))
+      ptk/WatchEvent
+      (watch [_ state _]
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
+                                           #(txt/update-text-content % update-node? update-fn nil)
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (and affects-layout?
+               (features/active-feature? state "render-wasm/v1"))
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
 
 (defn update-line-height
   ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -353,11 +364,17 @@
                       (-> node
                           (d/txt-merge txt-attrs)
                           (cty/remove-typography-from-node))))]
-    (dwsh/update-shapes shape-ids
+    (ptk/reify ::generate-font-family-text-shape-update
-                        (fn [shape]
+      ptk/WatchEvent
-                          (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
+      (watch [_ state _]
-                        {:ignore-touched true
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
-                         :page-id page-id})))
+                                           (fn [shape]
+                                             (txt/update-text-content shape update-node? #(update-fn %1 (ctst/font-weight-applied? shape)) nil))
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (features/active-feature? state "render-wasm/v1")
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
 
 (defn- create-font-family-text-attrs
   [value]
@@ -425,10 +442,16 @@
                       (-> node
                           (d/txt-merge txt-attrs)
                           (cty/remove-typography-from-node))))]
-    (dwsh/update-shapes shape-ids
+    (ptk/reify ::generate-font-weight-text-shape-update
-                        #(txt/update-text-content % update-node? update-fn nil)
+      ptk/WatchEvent
-                        {:ignore-touched true
+      (watch [_ state _]
-                         :page-id page-id})))
+        (cond-> (rx/of (dwsh/update-shapes shape-ids
+                                           #(txt/update-text-content % update-node? update-fn nil)
+                                           {:ignore-touched true
+                                            :page-id page-id}))
+          (features/active-feature? state "render-wasm/v1")
+          (rx/merge
+           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
 
 (defn update-font-weight
   ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))

frontend/src/app/main/ui/dashboard/file_menu.cljs

@@ -193,11 +193,11 @@
         restore-fn
         (fn [_]
           (st/emit! (dd/restore-files-immediately
-                     (with-meta {:team-id (:id current-team)
+                     (with-meta {:team-id current-team-id
                                  :ids (into #{} d/xf:map-id files)}
                        {:on-success #(st/emit! (ntf/success (tr "dashboard.restore-success-notification" (:name file)))
-                                               (dd/fetch-projects (:id current-team))
+                                               (dd/fetch-projects current-team-id)
-                                               (dd/fetch-deleted-files (:id current-team)))
+                                               (dd/fetch-deleted-files current-team-id))
                         :on-error #(st/emit! (ntf/error (tr "dashboard.errors.error-on-restore-file" (:name file))))}))))
 
         on-restore-immediately
@@ -214,7 +214,7 @@
         on-delete-immediately
         (fn []
           (let [accept-fn #(st/emit! (dd/delete-files-immediately
-                                      {:team-id (:id current-team)
+                                      {:team-id current-team-id
                                        :ids (into #{} d/xf:map-id files)}))]
             (st/emit!
              (modal/show {:type :confirm
@@ -244,8 +244,7 @@
            (for [project current-projects]
              {:name (get-project-name project)
               :id (get-project-id project)
-              :handler (on-move (:id current-team)
+              :handler (on-move current-team-id (:id project))})
-                                (:id project))})
            (when (seq other-teams)
              [{:name (tr "dashboard.move-to-other-team")
                :id "move-to-other-team"

frontend/src/app/main/ui/forms.cljs

@@ -23,6 +23,7 @@
 
         touched?   (and (contains? (:data @form) input-name)
                         (get-in @form [:touched input-name]))
+
         error      (get-in @form [:errors input-name])
 
         value      (get-in @form [:data input-name] "")
@@ -52,7 +53,8 @@
   (let [form      (mf/use-ctx context)
         disabled? (or (and (some? form)
                            (or (not (:valid @form))
-                               (seq (:external-errors @form))))
+                               (seq (:async-errors @form))
+                               (seq (:extra-errors @form))))
                       (true? disabled))
         handle-key-down-save
         (mf/use-fn

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs

@@ -236,12 +236,14 @@
    (on-composite-input-change form field value false))
   ([form field value trim?]
    (letfn [(clean-errors [errors]
-             (-> errors
+             (some-> errors
-                 (dissoc field)
+                     (update :value #(when (map? %) (dissoc % field)))
-                 (not-empty)))]
+                     (update :value #(when (seq %) %))
+                     (not-empty)))]
      (swap! form (fn [state]
                    (-> state
                        (assoc-in [:data :value field] (if trim? (str/trim value) value))
+                       (assoc-in [:touched :value field] true)
                        (update :errors clean-errors)
                        (update :extra-errors clean-errors)))))))
 
@@ -257,6 +259,9 @@
         value
         (get-in @form [:data :value input-name] "")
 
+        touched?
+        (get-in @form [:touched :value input-name])
+
         resolve-stream
         (mf/with-memo [token]
           (if-let [value (get-in token [:value input-name])]
@@ -284,7 +289,7 @@
                                 :hint-message (:message hint)
                                 :hint-type (:type hint)})
         props
-        (if error
+        (if (and touched? error)
           (mf/spread-props props {:hint-type "error"
                                   :hint-message (:message error)})
           props)
@@ -332,6 +337,7 @@
                                  message (tr "workspace.tokens.resolved-value" (or resolved-value value))]
                              (swap! form update :errors dissoc :value)
                              (swap! form update :extra-errors dissoc :value)
+                             (swap! form update :async-errors dissoc :reference)
                              (if (= input-value (str resolved-value))
                                (reset! hint* {})
                                (reset! hint* {:message message :type "hint"})))))))]

frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs

@@ -105,13 +105,6 @@
         active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
         active-tab (deref active-tab*)
 
-        on-toggle-tab
-        (mf/use-fn
-         (mf/deps)
-         (fn [new-tab]
-           (let [new-tab (keyword new-tab)]
-             (reset! active-tab* new-tab))))
-
         token
         (mf/with-memo [token]
           (or token {:type token-type}))
@@ -151,6 +144,17 @@
         (fm/use-form :schema schema
                      :initial initial)
 
+        on-toggle-tab
+        (mf/use-fn
+         (mf/deps form)
+         (fn [new-tab]
+           (let [new-tab (keyword new-tab)]
+             (if (= new-tab :reference)
+               (swap! form assoc-in [:async-errors :reference]
+                      {:message "Need valid reference"})
+               (swap! form update :async-errors dissoc :reference))
+             (reset! active-tab* new-tab))))
+
         on-cancel
         (mf/use-fn
          (fn [e]

frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs

@@ -291,6 +291,7 @@
           [:color {:optional true} [:maybe :string]]
           [:color-result {:optional true} ::sm/any]
           [:inset {:optional true} [:maybe :boolean]]]]]
+
        (if (= active-tab :reference)
          [:reference {:optional false} ::sm/text]
          [:reference {:optional true} [:maybe :string]])]]

frontend/src/app/plugins/shape.cljs

@@ -1185,7 +1185,6 @@
                        {:cmd :export-shapes
                         :profile-id (:profile-id @st/state)
                         :wait true
-                        :skip-children (:skip-children value false)
                         :exports [{:file-id   file-id
                                    :page-id   page-id
                                    :object-id id

frontend/src/app/util/i18n.cljs

@@ -114,7 +114,7 @@
 
 (defn- load
   [locale]
-  (let [path (str "./translation." locale ".js?version=" (:full cf/version))]
+  (let [path (str "./translation." locale ".js?version=" cf/version-tag)]
     (->> (mod/import path)
          (p/fmap (fn [result] (unchecked-get result "default")))
          (p/fnly (fn [data cause]

plugins/wrangle-penpot-plugins-api-doc.toml

@@ -0,0 +1,4 @@
+name = "penpot-plugins-api-doc"
+compatibility_date = "2025-01-01"
+
+assets = { directory = "dist/doc" }

render-wasm/_build_env

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-export CURRENT_VERSION=${CURRENT_VERSION:-develop};
+export VERSION_TAG=${VERSION:-develop};
 
 if [ "$NODE_ENV" = "production" ];  then
     export BUILD_MODE="release";
@@ -81,7 +81,7 @@ function copy_artifacts {
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js $DEST/$BUILD_NAME.js;
     cp target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.wasm $DEST/$BUILD_NAME.wasm;
 
-    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$CURRENT_VERSION/g" $DEST/$BUILD_NAME.js;
+    sed -i "s/render_wasm.wasm/$BUILD_NAME.wasm?version=$VERSION_TAG/g" $DEST/$BUILD_NAME.js;
 
     yarn esbuild target/wasm32-unknown-emscripten/$BUILD_MODE/render_wasm.js \
         --log-level=error \

render-wasm/src/main.rs

@@ -284,6 +284,7 @@ pub extern "C" fn set_view_end() {
             performance::end_measure!("set_view_end::clear_tile_index");
             performance::end_timed_log!("clear_tile_index", _clear_start);
         }
+        state.render_state.sync_cached_viewbox();
         performance::end_measure!("set_view_end");
         performance::end_timed_log!("set_view_end", _end_start);
         #[cfg(feature = "profile-macros")]

render-wasm/src/render.rs

@@ -1136,6 +1136,7 @@ impl RenderState {
     ) -> Result<(), String> {
         let _start = performance::begin_timed_log!("start_render_loop");
         let scale = self.get_scale();
+
         self.tile_viewbox.update(self.viewbox, scale);
 
         self.focus_mode.reset();
@@ -2292,6 +2293,10 @@ impl RenderState {
         (self.viewbox.zoom - self.cached_viewbox.zoom).abs() > f32::EPSILON
     }
 
+    pub fn sync_cached_viewbox(&mut self) {
+        self.cached_viewbox = self.viewbox;
+    }
+
     pub fn mark_touched(&mut self, uuid: Uuid) {
         self.touched_ids.insert(uuid);
     }

render-wasm/src/shapes.rs

@@ -1529,6 +1529,7 @@ impl Shape {
             || !self.transform.is_identity()
             || !math::is_close_to(self.rotation, 0.0)
             || matches!(self.shape_type, Type::Group(_) | Type::Frame(_))
+            || matches!(self.shape_type, Type::Text(_))
     }
 
     pub fn count_visible_inner_strokes(&self) -> usize {

render-wasm/src/state.rs

@@ -100,6 +100,16 @@ impl<'a> State<'a> {
     }
 
     pub fn start_render_loop(&mut self, timestamp: i32) -> Result<(), String> {
+        // If zoom changed, we MUST rebuild the tile index before using it.
+        // Otherwise, the index will have tiles from the old zoom level, causing visible
+        // tiles to appear empty. This can happen if start_render_loop() is called before
+        // set_view_end() finishes rebuilding the index, or if set_view_end() hasn't been
+        // called yet.
+        let zoom_changed = self.render_state.zoom_changed();
+        if zoom_changed {
+            self.rebuild_tiles_shallow();
+        }
+
         self.render_state
             .start_render_loop(None, &self.shapes, timestamp, false)?;
         Ok(())