3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-11 08:46:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Introduce modules and code splitting on the build system.

Browse source
This commit is contained in:
Andrey Antukh 2019-08-07 20:08:11 +02:00
parent d2fe689fc5
commit fd1796557d
6 changed files with 121 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/gulpfile.js
View file

@ -22,7 +22,7 @@ paths.scss = paths.app + "styles/**/*.scss";
gulp.task("clean", function(next) { gulp.task("clean", function(next) {
rimraf(paths.output + "css/", function() { rimraf(paths.output + "css/", function() {
rimraf(paths.output + "js/", function() { rimraf(paths.output + "js/", function() {
rimraf(paths.target, next); next()
}); });
}); });
}); });
@ -85,14 +85,9 @@ function templatePipeline(options) {
return function() { return function() {
const input = options.input; const input = options.input;
const output = options.output; const output = options.output;
const jspath = options.jspath;
const csspath = options.csspath;
const ts = Math.floor(new Date()); const ts = Math.floor(new Date());
const tmpl = mustache({ const tmpl = mustache({
jsfile: `${jspath}?v=${ts}`, ts: ts
cssfile: `${csspath}?v=${ts}`
}); });
return gulp.src(input) return gulp.src(input)
@ -105,8 +100,6 @@ function templatePipeline(options) {
gulp.task("template:main", templatePipeline({ gulp.task("template:main", templatePipeline({
input: paths.app + "index.mustache", input: paths.app + "index.mustache",
output: paths.output, output: paths.output,
jspath: "/js/main.js",
csspath: "/css/main.css"
})); }));
gulp.task("template:view", templatePipeline({ gulp.task("template:view", templatePipeline({
@ -142,15 +135,11 @@ gulp.task("dist:clean", function(next) {
gulp.task("dist:template:main", templatePipeline({ gulp.task("dist:template:main", templatePipeline({
input: paths.app + "index.mustache", input: paths.app + "index.mustache",
output: paths.dist, output: paths.dist,
jspath: "/js/main.js",
csspath: "/css/main.css"
})); }));
gulp.task("dist:template:view", templatePipeline({ gulp.task("dist:template:view", templatePipeline({
input: paths.app + "view.mustache", input: paths.app + "view.mustache",
output: paths.dist + "view/", output: paths.dist + "view/",
jspath: "/js/view.js",
csspath: "/css/view.css"
})); }));
gulp.task("dist:template", gulp.parallel("dist:template:view", "dist:template:main")); gulp.task("dist:template", gulp.parallel("dist:template:view", "dist:template:main"));

7
frontend/resources/index.mustache
View file

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>UXBOX - The Open-Source prototyping tool</title> <title>UXBOX - The Open-Source prototyping tool</title>
<link href="{{& cssfile}}" rel="stylesheet" type="text/css" /> <link href="/css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/favicon.png" /> <link rel="icon" href="/images/favicon.png" />
</head> </head>
<body> <body>
@ -12,7 +12,10 @@
<section id="lightbox"></section> <section id="lightbox"></section>
<section id="loader"></section> <section id="loader"></section>
<section id="modal"></section> <section id="modal"></section>
<script src="{{& jsfile}}"></script>
<script src="/js/cljs_base.js?ts={{& ts}}"></script>
<script src="/js/common.js?ts={{& ts}}"></script>
<script src="/js/main.js?ts={{& ts}}"></script>
<script>uxbox.main.init()</script> <script>uxbox.main.init()</script>
</body> </body>
</html> </html>

8
frontend/resources/view.mustache
View file

@ -5,14 +5,18 @@
<meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UXBOX-view - The Open-Source prototyping tool</title> <title>UXBOX-view - The Open-Source prototyping tool</title>
<link href="{{& cssfile}}" rel="stylesheet" type="text/css" /> <link href="/css/view.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/favicon.png" /> <link rel="icon" href="/images/favicon.png" />
</head> </head>
<body> <body>
<section id="app" tabindex="1"></section> <section id="app" tabindex="1"></section>
<section id="lightbox" tabindex="2"></section> <section id="lightbox" tabindex="2"></section>
<section id="modal"></section>
<section id="loader" tabindex="3"></section> <section id="loader" tabindex="3"></section>
<script src="{{& jsfile}}"></script>
<script src="/js/cljs_base.js?ts={{& ts}}"></script>
<script src="/js/common.js?ts={{& ts}}"></script>
<script src="/js/view.js?ts={{& ts}}"></script>
<script>uxbox.view.init()</script> <script>uxbox.view.init()</script>
</body> </body>
</html> </html>

4
frontend/scripts/build-develop.sh
View file

@ -8,4 +8,6 @@ npm ci
npx gulp dist:clean || exit 1 npx gulp dist:clean || exit 1
npx gulp dist || exit 1 npx gulp dist || exit 1
clojure -Adev tools.clj build-all || exit 1 clojure -Adev tools.clj build:all || exit 1
npx gulp dist:gzip || exit 1

5
frontend/scripts/build-production.sh
View file

@ -10,4 +10,7 @@ export NODE_ENV=production;
npx gulp dist:clean || exit 1; npx gulp dist:clean || exit 1;
npx gulp dist || exit 1; npx gulp dist || exit 1;
clojure -Adev tools.clj dist-all clojure -Adev tools.clj dist:all || exit 1
npx gulp dist:gzip || exit 1

165
frontend/tools.clj
View file

@ -1,3 +1,4 @@
(require '[clojure.pprint :refer [pprint]])
(require '[clojure.java.shell :as shell]) (require '[clojure.java.shell :as shell])
(require '[figwheel.main.api :as figwheel]) (require '[figwheel.main.api :as figwheel])
(require '[cljs.build.api :as api]) (require '[cljs.build.api :as api])
@ -12,6 +13,8 @@
(println "Unknown or missing task. Choose one of:" interposed) (println "Unknown or missing task. Choose one of:" interposed)
(System/exit 1))) (System/exit 1)))
;; --- Generic Build Options
(def debug? (boolean (:uxbox-debug env nil))) (def debug? (boolean (:uxbox-debug env nil)))
(def demo? (boolean (:uxbox-demo env nil))) (def demo? (boolean (:uxbox-demo env nil)))
@ -24,47 +27,107 @@
{:cache-analysis true {:cache-analysis true
:parallel-build true :parallel-build true
:language-in :ecmascript6 :language-in :ecmascript6
:language-out :ecmascript6 :language-out :ecmascript5
:closure-defines closure-defines :closure-defines closure-defines
:optimizations :none :optimizations :none
:verbose false :verbose true
:source-map true
:static-fns false :static-fns false
:pretty-print true :pretty-print true
:elide-asserts false}) :elide-asserts false})
(defn get-output-options (def dist-build-options
[name dist? map?] {:optimizations :advanced
(let [prefix (if dist? "dist/js" "resources/public/js") :pretty-print false
srcmap (if (= map? ::path) :static-fns true
(str prefix "/" name ".js.map") ;; :fn-invoke-direct true
map?)] :elide-asserts true})
{:main (symbol (str "uxbox." name))
:output-to (str prefix "/" name ".js")
:output-dir (str prefix "/" name)
:source-map srcmap
:asset-path (str "/js/" name)}))
(defmethod task "dist" ;; --- Specific Build Options
[[_ name]]
(api/build (api/inputs "src")
(merge default-build-options
(get-output-options name true ::path)
(when (= name "worker")
{:target :webworker})
{:optimizations :advanced
:pretty-print false
:static-fns true
;; :fn-invoke-direct true
:elide-asserts true})))
(defmethod task "build" (def main-build-options
[[_ name]] {:output-dir "resources/public/js"
(api/build (api/inputs "src") :asset-path "/js"
(merge default-build-options :modules {:common {:entries #{}
(get-output-options name true true) :output-to "resources/public/js/common.js"}
(when (= name "worker") :main {:entries #{"uxbox.main"}
{:target :webworker}) :output-to "resources/public/js/main.js"
{:optimizations :none}))) :depends-on #{:common}}
:view {:entries #{"uxbox.view"}
:output-to "resources/public/js/view.js"
:depends-on #{:common}}}})
(def worker-build-options
{:main 'uxbox.worker
:target :webworker
:output-to "resources/public/js/worker.js"
:output-dir "resources/public/js/worker"
:asset-path "/js/worker"})
(def main-dist-build-options
(-> (merge default-build-options
main-build-options
dist-build-options)
(assoc :output-dir "dist/js")
(assoc-in [:modules :common :output-to] "dist/js/common.js")
(assoc-in [:modules :main :output-to] "dist/js/main.js")
(assoc-in [:modules :view :output-to] "dist/js/view.js")))
(def main-build-build-options
(merge main-dist-build-options
{:optimizations :none}))
(def worker-dist-build-options
(merge default-build-options
worker-build-options
dist-build-options
{:output-to "dist/js/worker.js"
:output-dir "dist/js/worker"
:source-map "dist/js/worker.js.map"}))
(def worker-build-build-options
(merge worker-dist-build-options
{:optimizations :none
:source-map true}))
;; --- Tasks Definitions
(defmethod task "dist:main"
[args]
(let [cfg main-dist-build-options]
;; (pprint cfg)
(api/build (api/inputs "src") cfg)))
(defmethod task "dist:worker"
[args]
(let [cfg worker-dist-build-options]
;; (pprint cfg)
(api/build (api/inputs "src") cfg)))
(defmethod task "build:main"
[args]
(let [cfg main-build-build-options]
;; (pprint cfg)
(api/build (api/inputs "src") cfg)))
(defmethod task "build:worker"
[args]
(let [cfg worker-build-build-options]
;; (pprint cfg)
(api/build (api/inputs "src") cfg)))
(defmethod task "build:all"
[args]
(task ["build:main"])
(task ["build:worker"]))
(defmethod task "dist:all"
[args]
(task ["dist:main"])
(task ["dist:worker"]))
;; --- Tests Tasks
(defmethod task "build-tests" (defmethod task "build-tests"
[& args] [& args]
@ -78,25 +141,20 @@
:output-dir "target/tests/main" :output-dir "target/tests/main"
:optimizations :none))) :optimizations :none)))
;; --- Figwheel Config & Tasks
(def figwheel-builds (def figwheel-builds
{:main {:id "main" {:main {:id "main"
:options (merge default-build-options :options (merge default-build-options main-build-options)}
(get-output-options "main" false true))}
:view {:id "view"
:options (merge default-build-options
(get-output-options "view" false true))}
:worker {:id "worker" :worker {:id "worker"
:options (merge default-build-options :options (merge default-build-options worker-build-options)}})
{:target :webworker}
(get-output-options "worker" false true))}})
(def figwheel-options (def figwheel-options
{:open-url false {:open-url false
:pprint-config false
:load-warninged-code true :load-warninged-code true
:auto-testing false :auto-testing false
:css-dirs ["resources/public/css" :css-dirs ["resources/public/css"]
"resources/public/view/css"]
:ring-server-options {:port 3449 :host "0.0.0.0"} :ring-server-options {:port 3449 :host "0.0.0.0"}
:watch-dirs ["src" "test"]}) :watch-dirs ["src" "test"]})
@ -105,29 +163,8 @@
(figwheel/start (figwheel/start
figwheel-options figwheel-options
(:main figwheel-builds) (:main figwheel-builds)
(:view figwheel-builds)
(:worker figwheel-builds))) (:worker figwheel-builds)))
(defmethod task "figwheel-single"
[[_ name]]
(when-let [build (get figwheel-builds (keyword name))]
(figwheel/start
figwheel-options
build
(:worker figwheel-builds))))
(defmethod task "build-all"
[args]
(task ["build" "main"])
(task ["build" "view"])
(task ["build" "worker"]))
(defmethod task "dist-all"
[args]
(task ["dist" "main"])
(task ["dist" "view"])
(task ["dist" "worker"]))
;;; Build script entrypoint. This should be the last expression. ;;; Build script entrypoint. This should be the last expression.
(task *command-line-args*) (task *command-line-args*)