feat: add support for JavaScript (#5)

assets/mods/echarts/index.ts

@@ -1,14 +1,28 @@
 import * as echarts from 'mods/echarts/echarts.js'
 
+declare global {
+  interface Window {
+    echarts: any
+  }
+}
+
 (() => {
+  window.echarts = echarts
+
   const init = (ele: Element): Promise => {
     return new Promise((resolve) => {
       if (ele.classList.contains('initializing') || ele.classList.contains('initialized')) {
         resolve(false)
       }
 
       ele.classList.add('initializing')
-      const option = JSON.parse(ele.getAttribute('data-options') ?? '{}')
+      let option = {}
+      const optionVar = ele.getAttribute('data-echarts-options-var')
+      if (optionVar !== null) {
+        option = window[optionVar]
+      } else {
+        option = JSON.parse(ele.getAttribute('data-echarts-options') ?? '{}')
+      }
       echarts.init(ele).setOption(option)
       ele.classList.remove('initializing')
       ele.classList.add('initialized')
@@ -26,14 +40,16 @@ import * as echarts from 'mods/echarts/echarts.js'
     })
   })
 
-  const charts = document.querySelectorAll('.echarts')
-  charts.forEach((ele) => {
-    observer.observe(ele)
-  })
-
-  window.addEventListener('resize', () => {
+  document.addEventListener('DOMContentLoaded', () => {
+    const charts = document.querySelectorAll('.echarts')
     charts.forEach((ele) => {
-      echarts.getInstanceByDom(ele)?.resize()
+      observer.observe(ele)
+    })
+
+    window.addEventListener('resize', () => {
+      charts.forEach((ele) => {
+        echarts.getInstanceByDom(ele)?.resize()
+      })
     })
   })
 })()

assets/mods/echarts/js-vars.js

@@ -0,0 +1,3 @@
+{{- range $k, $v := . }}
+  {{ printf "window.%s = (() => { %s })();" $k $v | safeJS }}
+{{- end }}

layouts/_default/_markup/render-codeblock-echarts.html

@@ -1,9 +1,15 @@
 {{- .Page.Store.Set "hasECharts" true -}}
 {{- $attrs := .Attributes }}
+{{- $js := default false $attrs._js }}
+{{- $options := .Inner }}
+{{- if not $js }}
+  {{- $options = $options | transform.Unmarshal | jsonify }}
+{{- end }}
 {{- $ctx := dict
   "caller" "codeblock"
   "ordinal" .Ordinal
-  "options" (.Inner | transform.Unmarshal)
+  "js" $js
+  "options" $options
   "params" $attrs
 }}
 {{- partial "echarts/chart" $ctx }}

layouts/partials/echarts/assets/script.html

@@ -9,3 +9,15 @@
   {{- end }}
   <script src="{{ $js.RelPermalink }}"></script>
 {{- end }}
+{{- with .Store.Get "eChartsJSVars" }}
+  {{- $jsVars := resources.Get "mods/echarts/js-vars.js" }}
+  {{- $jsVarsPath := printf "%s/echarts.vars.js" page.RelPermalink }}
+  {{- $jsVars = $jsVars
+    | resources.ExecuteAsTemplate $jsVarsPath .
+    | js.Build (dict "targetPath" $jsVarsPath "minify" hugo.IsProduction)
+  }}
+  {{- if hugo.IsProduction }}
+    {{- $jsVars = $jsVars | fingerprint }}
+  {{- end }}
+  <script src="{{ $jsVars.RelPermalink }}"></script>
+{{- end }}

layouts/partials/echarts/chart.html

@@ -1,10 +1,16 @@
 {{- $echarts := site.Params.echarts }}
 {{- $params := .params }}
-{{- $options := jsonify .options }}
+{{- $options := .options }}
+{{- $js := .js }}
 {{- $attrs := newScratch }}
-{{- $attrs.Set "id" (printf "echarts-%s-%d" .caller .ordinal) }}
+{{- $id := printf "echarts-%s-%d" .caller .ordinal }}
+{{- $jsVar := replace $id "-" "_" | printf "%s_options" }}
+{{- $attrs.Set "id" $id }}
 {{- $attrs.Set "class" "echarts" }}
 {{- range $k, $v := $params }}
+  {{- if strings.HasPrefix $k "_" }}
+    {{- continue }}
+  {{- end }}
   {{- if in (slice "height" "width") $k }}
     {{- continue }}
   {{- end }}
@@ -36,5 +42,9 @@
 {{- end }}
 <div
   {{ delimit $attrsSlice " " | safeHTMLAttr }}
-  data-options="{{ $options }}">
+  {{ if not $js }}data-echarts-options="{{ $options }}"{{ end }}
+  {{ if $js }}data-echarts-options-var="{{ $jsVar }}"{{ end }}>
 </div>
+{{- if $js }}
+  {{- page.Store.SetInMap "eChartsJSVars" $jsVar $options }}
+{{- end }}

layouts/shortcodes/echarts.html

@@ -1,18 +1,35 @@
 {{- .Page.Store.Set "hasECharts" true -}}
 {{- $options := dict }}
-{{- with .Inner }}
-  {{- $options = transform.Unmarshal . }}
+{{- $js := default false (.Get "_js") }}
+{{- if .Inner }}
+  {{- $options = .Inner }}
+  {{- if not $js }}
+    {{- $options = transform.Unmarshal $options | jsonify }}
+  {{- end }}
+{{- else if $js }}
+  {{- $jsFile := .Get "_jsFile" }}
+  {{- with .Page.Resources.Get $jsFile }}
+    {{- $options = .Content }}
+  {{- else }}
+    {{- with resources.Get $jsFile }}
+      {{- $options = .Content }}
+    {{- end }}
+  {{- end }}
+  {{- if not $options }}
+    {{- errorf "[echarts] no such js file: %s." $jsFile }}
+  {{- end }}
 {{- else }}
   {{- $data := .Get "data" }}
   {{- with partial "base/functions/data" (dict "key" $data "page" .Page) }}
-    {{- $options = . }}
+    {{- $options = jsonify . }}
   {{- else }}
     {{- errorf "[echarts] no such data file: %s." $data }}
   {{- end }}
 {{- end }}
 {{- $ctx := dict
   "caller" "shortcode"
   "ordinal" .Ordinal
+  "js" $js
   "options" $options
   "params" (cond (not .Params) dict .Params)
 }}

package.json

@@ -23,5 +23,10 @@
     "lint": "npm run eslint",
     "eslint": "ts-standard",
     "stylelint": "npx stylelint \"**/*.scss\""
+  },
+  "ts-standard": {
+    "ignore": [
+      "assets/mods/echarts/js-vars.js"
+    ]
   }
 }