jaggar/Mardika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update browser example, bump deps, update docs

Browse Source
This commit is contained in:
Jacek Schae
2021-03-15 16:28:07 +01:00
parent f6c8e71e38
commit d8b4eea001
6 changed files with 60 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
README.md
View File

@@ -46,53 +46,58 @@ The app is only a very basic skeleton with the most useful development tools con
`shadow-cljs` is configured by the `shadow-cljs.edn` config. It looks like this: `shadow-cljs` is configured by the `shadow-cljs.edn` config. It looks like this:
```clojure ```clojure
{:source-paths ;; shadow-cljs configuration
["src"] ;; .cljs files go here {:source-paths ; .cljs files go here
["src/dev"
"src/main"
"src/test"]
:dependencies :dependencies ; covered later
[] ;; covered later []
:dev-http ; starts a http dev server on http://localhost:8020 and serves `public`
{8020 "public"}
:builds :builds
{:app {:target :browser {:app ; build identifier
:output-dir "public/js" {:target :browser
:asset-path "/js" :output-dir "public/js"
:asset-path "/js"
:modules :modules
{:main ;; <- becomes public/js/main.js {:main ; becomes public/js/main.js
{:entries [starter.browser]}} {:init-fn starter.browser/init}}}}}
;; start a development http server on http://localhost:8020
:devtools
{:http-root "public"
:http-port 8020}
}}}
``` ```
It defines the `:app` build with the `:target` set to `:browser`. All output will be written to `public/js` which is a path relative to the project root (ie. the directory the `shadow-cljs.edn` config is in). It defines the `:app` build with the `:target` set to `:browser`. All output will be written to `public/js` which is a path relative to the project root (ie. the directory the `shadow-cljs.edn` config is in).
`:modules` defines the how the output should be bundled together. For now we just want one file. The `:main` module will be written to `public/js/main.js`, it will include the code from the `:entries` and all their dependencies. `:modules` defines the how the output should be bundled together. For now we just want one file. The `:main` module will be written to `public/js/main.js`, it will include the code from the `:entries` and all their dependencies.
`:devtools` configures some useful development things. The `http://localhost:8020` server we used earlier is controlled by the `:http-port` and serves the `:http-root` directory. The last part is the actual `index.html` that is loaded when you open `http://localhost:8020`. It loads the generated `/js/main.js` and then calls `start.browser.init` which we defined in the `src/main/start/browser.cljs`.
The last part is the actual `index.html` that is loaded when you open `http://localhost:8020`. It loads the generated `/js/main.js` and then calls `start.browser.init` which we defined in the `src/start/browser.cljs`.
```html ```html
<!doctype html> <!DOCTYPE html>
<html> <html lang="en">
<head><title>Browser Starter</title></head> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<title>Browser Starter</title>
</head>
<body> <body>
<h1>shadow-cljs - Browser</h1> <h1>shadow-cljs - Browser</h1>
<div id="app"></div> <div id="app"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<script>starter.browser.init();</script>
</body> </body>
</html> </html>
``` ```
## Live reload ## Live reload
To see the live reload in action you can edit the `src/start/browser.cljs`. Some output will be printed in the browser console. To see the live reload in action you can edit the `src/main/start/browser.cljs`. Some output will be printed in the browser console.
## REPL ## REPL
@@ -101,9 +106,9 @@ During development it the REPL is very useful.
From the command line use `npx shadow-cljs cljs-repl app`. From the command line use `npx shadow-cljs cljs-repl app`.
``` ```
shadow-cljs - config .../shadow-cljs.edn version: 2.2.16 shadow-cljs - config .../shadow-cljs.edn
shadow-cljs - connected to server shadow-cljs - connected to server
[2:1]~cljs.user=> cljs.user=>
``` ```
This can now be used to eval code in the browser (assuming you still have it open). Try `(js/alert "Hi.")` and take it from there. You might want to use `rlwrap npx shadow-cljs cljs-repl app` if you intend to type a lot here. This can now be used to eval code in the browser (assuming you still have it open). Try `(js/alert "Hi.")` and take it from there. You might want to use `rlwrap npx shadow-cljs cljs-repl app` if you intend to type a lot here.

2
package.json
View File

@@ -1,5 +1,5 @@
{ {
"devDependencies": { "devDependencies": {
"shadow-cljs": "^2.3.22" "shadow-cljs": "^2.11.23"
} }
} }

1
public/css/main.css
View File

@@ -1,3 +1,4 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: green; color: green;
} }

22
public/index.html
View File

@@ -1,12 +1,16 @@
<!doctype html> <!DOCTYPE html>
<html> <html lang="en">
<head><title>Browser Starter</title></head> <head>
<link rel="stylesheet" href="/css/main.css"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<title>Browser Starter</title>
</head>
<body> <body>
<h1>shadow-cljs - Browser</h1> <h1>shadow-cljs - Browser</h1>
<div id="app"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<script>starter.browser.init();</script>
</body> </body>
</html> </html>

26
shadow-cljs.edn
View File

@@ -1,21 +1,21 @@
;; shadow-cljs configuration ;; shadow-cljs configuration
{:source-paths {:source-paths
["src"] ["src/dev"
"src/main"
"src/test"]
:dependencies :dependencies
[] []
:dev-http
{8020 "public"}
:builds :builds
{:app {:target :browser {:app
:output-dir "public/js" {:target :browser
:asset-path "/js" :output-dir "public/js"
:asset-path "/js"
:modules :modules
{:main ;; <- becomes public/js/main.js {:main ; becomes public/js/main.js
{:entries [starter.browser]}} {:init-fn starter.browser/init}}}}}
;; start a development http server on http://localhost:8020
:devtools
{:http-root "public"
:http-port 8020}
}}}

2
src/starter/browser.cljs → src/main/starter/browser.cljs
View File

@@ -4,7 +4,7 @@
(defn ^:dev/after-load start [] (defn ^:dev/after-load start []
(js/console.log "start")) (js/console.log "start"))
(defn ^:export init [] (defn init []
;; init is called ONCE when the page loads ;; init is called ONCE when the page loads
;; this is called in the index.html and must be exported ;; this is called in the index.html and must be exported
;; so it is available even in :advanced release builds ;; so it is available even in :advanced release builds