🐛 Fix shadow reference validation

✨ Use non-legacy config example on docker compose file
Merge pull request #8129 from penpot/niwinz-staging-bugfix-1
2026-01-20 12:20:16 -05:00 · 2026-01-20 14:06:40 +01:00 · 2026-01-20 13:25:55 +01:00 · 2026-01-20 12:26:55 +01:00 · 2026-01-20 12:26:39 +01:00 · 2026-01-20 12:26:39 +01:00
16 changed files with 92 additions and 77 deletions
--- a/docker/images/docker-compose.yaml
+++ b/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_STORAGE_ASSETS_S3_ENDPOINT: <ENDPOINT>
-      # PENPOT_STORAGE_ASSETS_S3_BUCKET: <BUKET_NAME>
+      # PENPOT_OBJECTS_STORAGE_BACKEND: s3
+      # PENPOT_OBJECTS_STORAGE_S3_ENDPOINT: <ENDPOINT>
+      # 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,
--- a/frontend/resources/templates/index.mustache
+++ b/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>
--- a/frontend/resources/templates/rasterizer.mustache
+++ b/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>
--- a/frontend/resources/templates/render.mustache
+++ b/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>

--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -27,9 +27,11 @@ export function startWorker() {
  });
 }

-export const isDebug = process.env.NODE_ENV !== "production";
-export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
-export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
+export const IS_DEBUG = process.env.NODE_ENV !== "production";
+export const BUILD_DATE = process.env.BUILD_DATE || (new Date().toString()) ;
+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 =
@@ -193,25 +195,25 @@ async function generateManifest() {
    render_main: "./js/render.js",
    rasterizer_main: "./js/rasterizer.js",

-    config: "./js/config.js?version=" + CURRENT_VERSION,
-    polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
-    libs: "./js/libs.js?version=" + CURRENT_VERSION,
-    worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
-    default_translations: "./js/translation.en.js?version=" + CURRENT_VERSION,
+    config: "./js/config.js?version=" + VERSION_TAG,
+    polyfills: "./js/polyfills.js?version=" + VERSION_TAG,
+    libs: "./js/libs.js?version=" + VERSION_TAG,
+    worker_main: "./js/worker/main.js?version=" + VERSION_TAG,
+    default_translations: "./js/translation.en.js?version=" + VERSION_TAG,

    importmap: JSON.stringify({
      "imports": {
-        "./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
-        "./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
-        "./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
-        "./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
-        "./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
-        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
-        "./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
-        "./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
-        "./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
-        "./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
-        "./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
+        "./js/shared.js": "./js/shared.js?version=" + VERSION_TAG,
+        "./js/main.js": "./js/main.js?version=" + VERSION_TAG,
+        "./js/render.js": "./js/render.js?version=" + VERSION_TAG,
+        "./js/render-wasm.js": "./js/render-wasm.js?version=" + VERSION_TAG,
+        "./js/rasterizer.js": "./js/rasterizer.js?version=" + VERSION_TAG,
+        "./js/main-dashboard.js": "./js/main-dashboard.js?version=" + VERSION_TAG,
+        "./js/main-auth.js": "./js/main-auth.js?version=" + VERSION_TAG,
+        "./js/main-viewer.js": "./js/main-viewer.js?version=" + VERSION_TAG,
+        "./js/main-settings.js": "./js/main-settings.js?version=" + VERSION_TAG,
+        "./js/main-workspace.js": "./js/main-workspace.js?version=" + VERSION_TAG,
+        "./js/util-highlight.js": "./js/util-highlight.js?version=" + VERSION_TAG
      }
    })
  };
@@ -222,11 +224,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,
+    isDebug: IS_DEBUG,
+    version: VERSION,
+    version_tag: VERSION_TAG,
+    build_date: BUILD_DATE,
+    build_ts: BUILD_TS,
  });

  return mustache.render(content, context, partials);
@@ -390,7 +393,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 +417,7 @@ async function generateTemplates() {
  };

  const context = {
-    manifest: manifest,
-    version: CURRENT_VERSION,
-    build_date: BUILD_DATE,
-    isDebug,
+    manifest: manifest
  };

  content = await renderTemplate(
@@ -487,7 +486,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);
  }
--- a/frontend/scripts/build
+++ b/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/

--- a/frontend/scripts/build-storybook
+++ b/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;
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -75,6 +75,7 @@
    {:fn-invoke-direct true
     :optimizations #shadow/env ["PENPOT_BUILD_OPTIMIZATIONS" :as :keyword :default :advanced]
     :source-map true
+     :pseudo-names true
     :elide-asserts true
     :anon-fn-naming-policy :off
     :cross-chunk-method-motion false
--- a/frontend/src/app/config.cljs
+++ b/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)
-        href    (-> public-uri
-                    (u/ensure-path-slash)
-                    (u/join resource)
-                    (get :path))]
-    (str href "?version=" version)))
+  (let [href (-> public-uri
+                 (u/ensure-path-slash)
+                 (u/join resource)
+                 (get :path))]
+    (str href "?version=" version-tag)))
--- a/frontend/src/app/main/ui/forms.cljs
+++ b/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
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs
+++ b/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
-                 (dissoc field)
-                 (not-empty)))]
+             (some-> errors
+                     (update :value #(when (map? %) (dissoc % field)))
+                     (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"})))))))]
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@@ -101,13 +101,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}))
@@ -144,6 +137,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))))
+
        warning-name-change?
        (not= (get-in @form [:data :name])
              (:name initial))
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs
+++ b/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]])]]
--- a/frontend/src/app/util/i18n.cljs
+++ b/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]
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -7757,7 +7757,7 @@ msgstr "Line height (multiplicador, px o %) o {alias}"

 #: src/app/main/data/workspace/tokens/errors.cljs:57
 msgid "workspace.tokens.missing-references"
-msgstr "Referéncias de tokens no encontradas:"
+msgstr "Referencias de tokens no encontradas: "

 #: src/app/main/ui/workspace/tokens/management/token_pill.cljs:123
 msgid "workspace.tokens.more-options"
--- a/render-wasm/_build_env
+++ b/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 \
Author	SHA1	Message	Date
Eva Marco	476d8e3e5c	🐛 Fix shadow reference validation	2026-01-20 14:06:40 +01:00
Andrey Antukh	8191d04114	✨ Use non-legacy config example on docker compose file	2026-01-20 13:25:55 +01:00
Andrey Antukh	88f0f75174	Merge pull request #8129 from penpot/niwinz-staging-bugfix-1 ✨ Several improvements for build process	2026-01-20 12:26:55 +01:00
Andrey Antukh	1ffa956251	✨ Include timestamp on version tag	2026-01-20 12:26:39 +01:00
Andrey Antukh	31054099ff	✨ Use pseudo-names on release builds of frontend (#8105 )	2026-01-20 12:26:39 +01:00
Eva Marco	983487d73c	🐛 Fix shadow token reference validation (#8128 )	2026-01-20 10:56:27 +01:00