mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
🎉 Add lazy-loading for penpot top-level page components
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
37a7bb202b
commit
caadc43d35
5 changed files with 136 additions and 79 deletions
|
|
@ -19,10 +19,9 @@
|
|||
:git/url "https://github.com/funcool/beicon.git"}
|
||||
|
||||
funcool/rumext
|
||||
{:git/tag "v2.7"
|
||||
:git/sha "37fa860"
|
||||
:git/url "https://github.com/funcool/rumext.git"
|
||||
}
|
||||
{:git/tag "v2.8"
|
||||
:git/sha "f8a0d9a"
|
||||
:git/url "https://github.com/funcool/rumext.git"}
|
||||
|
||||
instaparse/instaparse {:mvn/version "1.4.12"}
|
||||
garden/garden {:git/url "https://github.com/noprompt/garden"
|
||||
|
|
|
|||
|
|
@ -12,15 +12,47 @@
|
|||
:watch-dir "resources/public"
|
||||
:reload-strategy :full}
|
||||
:build-options {:manifest-name "manifest.json"}
|
||||
|
||||
:module-loader true
|
||||
:modules
|
||||
{:shared {:entries []}
|
||||
{:shared
|
||||
{:entries []}
|
||||
|
||||
:main
|
||||
{:entries [app.main]
|
||||
:depends-on #{:shared}
|
||||
:init-fn app.main/init}
|
||||
|
||||
:util-highlight
|
||||
{:entries [app.util.code-highlight]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:main-auth
|
||||
{:entries [app.main.ui.auth
|
||||
app.main.ui.auth.verify-token]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:main-viewer
|
||||
{:entries [app.main.ui.viewer]
|
||||
:depends-on #{:main :main-auth}}
|
||||
|
||||
:main-onboarding
|
||||
{:entries [app.main.ui.onboarding
|
||||
app.main.ui.onboarding.questions
|
||||
app.main.ui.releases]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:main-workspace
|
||||
{:entries [app.main.ui.workspace]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:main-dashboard
|
||||
{:entries [app.main.ui.dashboard]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:main-settings
|
||||
{:entries [app.main.ui.settings]
|
||||
:depends-on #{:main}}
|
||||
|
||||
:render
|
||||
{:entries [app.render]
|
||||
:depends-on #{:shared}
|
||||
|
|
|
|||
|
|
@ -10,26 +10,45 @@
|
|||
[app.main.features :as features]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.auth :refer [auth]]
|
||||
[app.main.ui.auth.verify-token :refer [verify-token]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.cursors :as c]
|
||||
[app.main.ui.dashboard :refer [dashboard]]
|
||||
[app.main.ui.debug.components-preview :as cm]
|
||||
[app.main.ui.frame-preview :as frame-preview]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.messages :as msgs]
|
||||
[app.main.ui.onboarding]
|
||||
[app.main.ui.onboarding.questions]
|
||||
[app.main.ui.releases]
|
||||
[app.main.ui.settings :as settings]
|
||||
[app.main.ui.static :as static]
|
||||
[app.main.ui.viewer :as viewer]
|
||||
[app.main.ui.workspace :as workspace]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.router :as rt]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def auth-page
|
||||
(mf/lazy-component app.main.ui.auth/auth))
|
||||
|
||||
(def verify-token-page
|
||||
(mf/lazy-component app.main.ui.auth.verify-token/verify-token))
|
||||
|
||||
(def viewer-page
|
||||
(mf/lazy-component app.main.ui.viewer/viewer))
|
||||
|
||||
(def dashboard-page
|
||||
(mf/lazy-component app.main.ui.dashboard/dashboard))
|
||||
|
||||
(def settings-page
|
||||
(mf/lazy-component app.main.ui.settings/settings))
|
||||
|
||||
(def workspace-page
|
||||
(mf/lazy-component app.main.ui.workspace/workspace))
|
||||
|
||||
(def questions-modal
|
||||
(mf/lazy-component app.main.ui.onboarding.questions/questions))
|
||||
|
||||
(def onboarding-modal
|
||||
(mf/lazy-component app.main.ui.onboarding/onboarding-modal))
|
||||
|
||||
(def release-modal
|
||||
(mf/lazy-component app.main.ui.releases/release-notes-modal))
|
||||
|
||||
(mf/defc on-main-error
|
||||
[{:keys [error] :as props}]
|
||||
(mf/with-effect
|
||||
|
|
@ -50,17 +69,17 @@
|
|||
:auth-register-success
|
||||
:auth-recovery-request
|
||||
:auth-recovery)
|
||||
[:& auth {:route route}]
|
||||
[:? [:& auth-page {:route route}]]
|
||||
|
||||
:auth-verify-token
|
||||
[:& verify-token {:route route}]
|
||||
[:? [:& verify-token-page {:route route}]]
|
||||
|
||||
(:settings-profile
|
||||
:settings-password
|
||||
:settings-options
|
||||
:settings-feedback
|
||||
:settings-access-tokens)
|
||||
[:& settings/settings {:route route}]
|
||||
[:? [:& settings-page {:route route}]]
|
||||
|
||||
:debug-icons-preview
|
||||
(when *assert*
|
||||
|
|
@ -70,11 +89,6 @@
|
|||
[:h1 "Icons"]
|
||||
[:& i/debug-icons-preview]])
|
||||
|
||||
:debug-components-preview
|
||||
[:div.debug-preview
|
||||
[:h1 "Components preview"]
|
||||
[:& cm/components-preview]]
|
||||
|
||||
(:dashboard-search
|
||||
:dashboard-projects
|
||||
:dashboard-files
|
||||
|
|
@ -85,8 +99,7 @@
|
|||
:dashboard-team-invitations
|
||||
:dashboard-team-webhooks
|
||||
:dashboard-team-settings)
|
||||
|
||||
[:*
|
||||
[:?
|
||||
#_[:& app.main.ui.releases/release-notes-modal {:version "1.19"}]
|
||||
#_[:& app.main.ui.onboarding/onboarding-templates-modal]
|
||||
#_[:& app.main.ui.onboarding/onboarding-modal]
|
||||
|
|
@ -96,53 +109,68 @@
|
|||
(and (contains? cf/flags :onboarding-questions)
|
||||
(not (:onboarding-questions-answered props false))
|
||||
(not (:onboarding-viewed props false)))
|
||||
[:& app.main.ui.onboarding.questions/questions]
|
||||
[:& questions-modal]
|
||||
|
||||
(and (not (:onboarding-viewed props))
|
||||
(contains? cf/flags :onboarding))
|
||||
[:& app.main.ui.onboarding/onboarding-modal {}]
|
||||
[:& onboarding-modal {}]
|
||||
|
||||
(and (contains? cf/flags :onboarding)
|
||||
(:onboarding-viewed props)
|
||||
(not= (:release-notes-viewed props) (:main cf/version))
|
||||
(not= "0.0" (:main cf/version)))
|
||||
[:& app.main.ui.releases/release-notes-modal {:version (:main cf/version)}]))
|
||||
[:& release-modal {:version (:main cf/version)}]))
|
||||
|
||||
(when profile
|
||||
[:& dashboard {:route route :profile profile}])]
|
||||
[:& dashboard-page {:route route :profile profile}])]
|
||||
|
||||
:viewer
|
||||
(let [{:keys [query-params path-params]} route
|
||||
{:keys [index share-id section page-id interactions-mode frame-id]
|
||||
:or {section :interactions interactions-mode :show-on-click}} query-params
|
||||
{:keys [file-id]} path-params]
|
||||
(if (:token query-params)
|
||||
[:& viewer/breaking-change-notice]
|
||||
[:& viewer/viewer-page {:page-id page-id
|
||||
:file-id file-id
|
||||
:section section
|
||||
:index index
|
||||
:share-id share-id
|
||||
:interactions-mode (keyword interactions-mode)
|
||||
:interactions-show? (case (keyword interactions-mode)
|
||||
:hide false
|
||||
:show true
|
||||
:show-on-click false)
|
||||
:frame-id frame-id}]))
|
||||
[:? {}
|
||||
(if (:token query-params)
|
||||
[:> static/static-header {}
|
||||
[:div.image i/unchain]
|
||||
[:div.main-message (tr "viewer.breaking-change.message")]
|
||||
[:div.desc-message (tr "viewer.breaking-change.description")]]
|
||||
|
||||
|
||||
[:& viewer-page
|
||||
{:page-id page-id
|
||||
:file-id file-id
|
||||
:section section
|
||||
:index index
|
||||
:share-id share-id
|
||||
:interactions-mode (keyword interactions-mode)
|
||||
:interactions-show? (case (keyword interactions-mode)
|
||||
:hide false
|
||||
:show true
|
||||
:show-on-click false)
|
||||
:frame-id frame-id}])])
|
||||
|
||||
:workspace
|
||||
(let [project-id (some-> params :path :project-id uuid)
|
||||
file-id (some-> params :path :file-id uuid)
|
||||
page-id (some-> params :query :page-id uuid)
|
||||
layout (some-> params :query :layout keyword)]
|
||||
[:& workspace/workspace {:project-id project-id
|
||||
:file-id file-id
|
||||
:page-id page-id
|
||||
:layout-name layout
|
||||
:key file-id}])
|
||||
[:? {}
|
||||
[:& workspace-page {:project-id project-id
|
||||
:file-id file-id
|
||||
:page-id page-id
|
||||
:layout-name layout
|
||||
:key file-id}]])
|
||||
|
||||
|
||||
:debug-components-preview
|
||||
[:div.debug-preview
|
||||
[:h1 "Components preview"]
|
||||
[:& cm/components-preview]]
|
||||
|
||||
:frame-preview
|
||||
[:& frame-preview/frame-preview]
|
||||
|
||||
nil)]]))
|
||||
|
||||
(mf/defc app
|
||||
|
|
|
|||
|
|
@ -6,17 +6,18 @@
|
|||
|
||||
(ns app.main.ui.debug.components-preview
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require [app.common.data :as d]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.search-bar :refer [search-bar]]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.search-bar :refer [search-bar]]
|
||||
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc component-wrapper
|
||||
{::mf/wrap-props false}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
[app.util.globals :as globals]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
[app.util.webapi :as wapi]
|
||||
[cuerdas.core :as str]
|
||||
[goog.events :as events]
|
||||
|
|
@ -334,11 +335,10 @@
|
|||
:page page
|
||||
:zoom zoom}])]])))
|
||||
|
||||
(mf/defc viewer
|
||||
[{:keys [params data]}]
|
||||
|
||||
(let [{:keys [page-id share-id section index interactions-mode]} params
|
||||
{:keys [file users project permissions]} data
|
||||
(mf/defc viewer-content
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [data page-id share-id section index interactions-mode] :as props}]
|
||||
(let [{:keys [file users project permissions]} data
|
||||
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
|
||||
|
|
@ -747,26 +747,23 @@
|
|||
:section section
|
||||
:index index}]]))]]])))
|
||||
|
||||
;; --- Component: Viewer Page
|
||||
;; --- Component: Viewer
|
||||
|
||||
(mf/defc viewer-page
|
||||
[{:keys [file-id] :as props}]
|
||||
|
||||
(mf/with-effect [file-id]
|
||||
(st/emit! (dv/initialize props))
|
||||
(fn []
|
||||
(st/emit! (dv/finalize props))))
|
||||
(mf/defc viewer
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id share-id page-id] :as props}]
|
||||
(mf/with-effect [file-id page-id share-id]
|
||||
(let [params {:file-id file-id
|
||||
:page-id page-id
|
||||
:share-id share-id}]
|
||||
(st/emit! (dv/initialize params))
|
||||
(fn []
|
||||
(st/emit! (dv/finalize params)))))
|
||||
|
||||
(if-let [data (mf/deref refs/viewer-data)]
|
||||
(let [key (str (get-in data [:file :id]))]
|
||||
[:& viewer {:params props :data data :key key}])
|
||||
(let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
|
||||
[:> viewer-content props])
|
||||
|
||||
[:div.loader-content.viewer-loader
|
||||
i/loader-pencil]))
|
||||
|
||||
(mf/defc breaking-change-notice
|
||||
[]
|
||||
[:> static/static-header {}
|
||||
[:div.image i/unchain]
|
||||
[:div.main-message (tr "viewer.breaking-change.message")]
|
||||
[:div.desc-message (tr "viewer.breaking-change.description")]])
|
||||
|
|
|
|||
Loading…
Reference in a new issue