w-plot-vue 1.0.0

package/toolg/cvCasename.mjs

@@ -0,0 +1,43 @@
+import map from 'lodash-es/map'
+import trim from 'lodash-es/trim'
+import filter from 'lodash-es/filter'
+import toUpper from 'lodash-es/toUpper'
+import split from 'lodash-es/split'
+import size from 'lodash-es/size'
+import join from 'lodash-es/join'
+
+
+function seCut(str) {
+
+    //split
+    let s = split(str, '&')
+
+    //trim
+    s = map(s, function(v) {
+        return trim(v)
+    })
+
+    //n
+    let n = size(s)
+    n = Math.min(4, n)
+
+    //r
+    let r = []
+    for (let i = 0; i < n; i++) {
+        r.push(s[i])
+    }
+
+    //join
+    let c = join(r, '_')
+
+    return c
+}
+
+
+function cvCasename(casename) {
+    //return seEncode(casename)
+    return seCut(casename)
+}
+
+
+export default cvCasename

package/toolg/gDistApp.mjs

@@ -0,0 +1,38 @@
+import rollupVueToHtml from 'w-package-tools/src/rollupVueToHtml.mjs'
+
+
+let opt = {
+    title: `w-plot-vue`,
+    head: `
+
+    <!-- rollupVueToHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- fontawesome -->
+    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
+
+    <!-- mdi, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
+
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link _href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+
+    <!-- data -->
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"></script>
+
+    `,
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+    },
+    external: [
+        'vue',
+    ],
+}
+rollupVueToHtml('./src/App.vue', './docs/examples/app.html', opt)
+

package/toolg/gDistRollupComps.mjs

@@ -0,0 +1,21 @@
+import _ from 'lodash-es'
+import rollupFiles from 'w-package-tools/src/rollupFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fdTar = './dist'
+
+
+rollupFiles({
+    fns: 'WGeoVue.vue',
+    fdSrc,
+    fdTar,
+    nameDistType: 'kebabCase',
+    globals: {
+        'vue': 'Vue', //因動態加載組件, 現統一使用window內Vue, 故此處不打包進來, 若vue-cli則自動將Vue關聯至window內的Vue
+    },
+    external: [
+        'vue',
+    ],
+})
+

package/toolg/gDocExams.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import _ from 'lodash-es'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+import getPks from 'w-package-tools/src/getPks.mjs'
+
+
+let fdSrc = './test-html/'
+let fdTar = './docs/examples/'
+
+
+function main() {
+    //把example裡面cdn更換, 再複製到docs的example內, 作為日後發佈為靜態網站
+
+    //pks
+    let pks = getPks()
+
+    //cdn
+    let cdn = `<script src="https://cdn.jsdelivr.net/npm/w-plot-vue@${pks.version}/dist/w-plot-vue.umd.js"></script>`
+
+    //mkdirSync
+    if (!fs.existsSync(fdTar)) {
+        fs.mkdirSync(fdTar)
+    }
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+
+    _.each(ltfs, function(v) {
+
+        //fn
+        let fn = fdSrc + v
+
+        //c
+        let c = fs.readFileSync(fn, 'utf8')
+
+        //replace
+        let r = `<script src="../dist/w-plot-vue.umd.js"></script>`
+        c = c.replace(r, cdn)
+
+        //write
+        //console.log(c)
+        fs.writeFileSync(fdTar + v, c, 'utf8')
+
+    })
+
+}
+main()

package/toolg/gExtractHtml.mjs

@@ -0,0 +1,263 @@
+import fs from 'fs'
+import * as cheerio from 'cheerio'
+import _ from 'lodash-es'
+import w from 'wsemi'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+import parseVueCode from 'w-package-tools/src/parseVueCode.mjs'
+import kebabPropsVueTemp from 'w-package-tools/src/kebabPropsVueTemp.mjs'
+import extractHtml from 'w-package-tools/src/extractHtml.mjs'
+import cvCasename from './cvCasename.mjs'
+
+
+let fdSrc = './src/'
+let fdTestHtml = './test-html/'
+let fdTestSrc = './test-action/'
+
+
+let $setting = {
+    //ignoreWhitespace: true,
+    xmlMode: false, //不能設定true, 否則會導致vue組件名稱變成self-closing, 此於瀏覽器指定html5規範下無法解析
+    decodeEntities: false,
+    // recognizeSelfClosing: false, //若xmlMode為true則recognizeSelfClosing必定為true
+}
+
+
+function writeHtml(v) {
+
+    function getAppTmp() {
+
+        //h
+        let h = v.tmp
+        // console.log('h', w.strleft(h, 100) + '...')
+
+        //$
+        let $ = cheerio.load(h, $setting)
+
+        //移除demolink
+        $('demolink').remove()
+
+        //於bk前插入, 添加組件kbname
+        $('div.bk').before(`<div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')">${v.kbname}</span></div>`)
+
+        //於bk內插入, 添加範例casename
+        $('div.bk').prepend(`<div class="item">${v.casename}</div>`)
+
+        //to html
+        h = $('body').html()
+        // console.log('getAppTmp', w.strleft(h, 100) + '...')
+
+        return h
+    }
+
+    function procHtml(h) {
+
+        //replace mdi-icon
+        let r = `mdi[A-Za-z]+` //有些mdi是放在元素attr內, 有些是放在vue data內, 故不能包含雙引號(限定attr)查找
+        let reg = new RegExp(r, 'g')
+        let mdis = h.match(reg)
+        if (mdis) {
+            _.each(mdis, (mdi) => {
+                let c = mdi
+                c = _.kebabCase(c) //轉kebab
+                c = `'${c}'` //添加單引號成為字串
+                h = h.replace(mdi, c) //取代
+            })
+        }
+
+        return h
+    }
+
+    //opt
+    let opt = {
+        title: `w-plot-vue`,
+        head: `
+    
+        <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    
+        <!-- fontawesome -->
+        <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
+    
+        <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
+    
+        <!-- google, 各組件使用mdi/js故不需引用 -->
+        <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+        <link _href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+    
+        <!-- data -->
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"></script>
+
+        <!-- w-plot-vue -->
+        <script src="../dist/w-plot-vue.umd.js"></script>
+    
+        <style>
+            .v-application--wrap {
+                /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+                width: 100vw;
+                max-width: 100vw;
+                font-family: inherit;
+                background: #fff;
+            }
+            .item { /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+                border-left: 3px solid #ffba75;
+                margin: 5px 5px 8px 0px;
+                padding: 3px 3px 5px 10px;
+                font-size: 0.9rem;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+            .head1 {
+                margin: 0px;
+                padding: 0px 0px 20px 0px;
+                font-size: 2.5rem;
+            }
+            .bk {
+                vertical-align: top;
+                padding: 10px 0px 60px 0px;
+            }
+            @media screen and (min-width:1000px){ /* 寬版 */
+                .bk {
+                    display: inline-block;
+                    margin: 0px 80px 0px 0px;
+                }
+            }
+        </style>
+    
+        `,
+        appTag: `v-app`,
+        appStyle: `font-family:inherit; padding:0px 30px;`,
+        appTmp: getAppTmp(),
+        installVue: `Vue.use(window['w-plot-vue'])`,
+        data: v.data,
+        mounted: v.mounted,
+        computed: v.computed,
+        methods: v.methods,
+        action: v.action,
+        procHtml,
+        fpHtml: `${fdTestHtml}${v.fn}.html`,
+        fpAction: `${fdTestSrc}${v.fn}.action.json`,
+    }
+
+    //extractHtml
+    extractHtml(opt)
+
+}
+
+
+function extractAppZone(fn) {
+
+    //read
+    let hh = fs.readFileSync(fn, 'utf8')
+    // console.log('hh', hh)
+
+    //parseVueCode
+    let { tmp, data, mounted, computed, methods, action } = parseVueCode(hh)
+
+    //vue屬性轉kebab, 記得要在cheerio處理前, 否則attr都會被改成小寫
+    tmp = kebabPropsVueTemp(tmp)
+    tmp = w.replace(tmp, `=""`, '')
+    // console.log('tmp', w.strleft(tmp, 100) + '...')
+
+    //$
+    let $ = cheerio.load(tmp, $setting)
+    // console.log(`$('div.bk').html()`, w.strleft($('div.bk').html(), 100) + '...')
+
+    //name
+    let name = fn.split('AppZone')
+    name = name[1]
+    name = name.replace('.vue', '')
+
+    //clear data
+    let ss = data.split('\r\n')
+    ss = _.filter(ss, (s) => {
+        return s.indexOf('            mdi') < 0 //去除@mdi/js icon
+    })
+    ss = _.map(ss, (v, k) => {
+        if (k === 0) {
+            return v
+        }
+        return `        ${v}`
+    })
+    data = ss.join('\r\n')
+    //console.log('data', data)
+
+    function getAttr(h, name) {
+        // console.log('getAttr', h, name)
+        let $ = cheerio.load(h, $setting)
+        let c = $('demolink').attr(':' + name)
+        c = w.replace(c, `\'`, '')
+        return c
+    }
+
+    //取各個bk, 先於各bk外層添加shell在取html, 才能取到bk含自己的html
+    $('div.bk').wrap('<div class="shell"></div>')
+    $('div.shell').map((i, v) => {
+        // console.log('v', v)
+
+        //me
+        let me = $(v)
+        // console.log(i, 'me', me)
+
+        //tmp
+        let tmp = me.html()
+        // console.log(i, 'tmp', tmp)
+
+        //ss
+        let kbname = getAttr(tmp, 'kbname')
+        let casename = getAttr(tmp, 'casename')
+        // console.log(i, kbname, ',', casename)
+
+        //fn
+        let fnc = `${casename}`
+        let fn = `${kbname}_${cvCasename(fnc)}`
+
+        //writeHtml
+        writeHtml({ name, kbname, casename, tmp, data, mounted, computed, methods, action, fn })
+
+    })
+
+}
+
+
+function main() {
+    //由jsdoc產製之wsemi.html, 自動添加將example轉換成codepen線上編輯功能
+
+    //fdTestHtml
+    cleanFolder(fdTestHtml)
+    //fs.mkdirSync(fdTestHtml)
+    //await fs.promises.mkdir(fdTestHtml)
+
+    //fdTestSrc
+    cleanFolder(fdTestSrc)
+    //fs.mkdirSync(fdTestSrc)
+    //await fs.promises.mkdir(fdTestSrc)
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+
+    //filter
+    ltfs = _.filter(ltfs, (v) => {
+        return v.indexOf('AppZone') >= 0
+    })
+    // ltfs = [
+    //     'AppZoneWJsonView.vue',
+    // ]
+    // console.log(ltfs)
+
+    //extractAppZone
+    _.each(ltfs, (v) => {
+        let fn = fdSrc + v
+        console.log('extracting: ' + fn)
+        extractAppZone(fn)
+    })
+
+}
+main()

package/toolg/gMergeComps.mjs

@@ -0,0 +1,75 @@
+import _ from 'lodash-es'
+import fs from 'fs'
+import w from 'wsemi'
+import getFiles from 'w-package-tools/src/getFiles.mjs'
+
+
+let fdSrc = './src/components/'
+let fn_tar = 'WGeoVue.vue'
+
+
+function main() {
+    //讀取components裡面組件, 自動生成WGeoVue, 供rollup打包整體組件
+
+    //getFiles
+    let ltfs = getFiles(fdSrc)
+    _.pull(ltfs, fn_tar)
+    _.pull(ltfs, 'demolink.vue')
+
+    //c1, c2
+    let c1 = []
+    let c2 = []
+    _.each(ltfs, function(v) {
+
+        //name_all
+        let name_all = v
+
+        //s
+        let s = _.split(v, '.')
+
+        //name_ori
+        let name_ori = s[0]
+
+        //name_ext
+        let name_ext = s[1]
+
+        //name_ori, name_kb
+        let name_kb = _.kebabCase(name_ori)
+
+        //c1
+        c1.push(`import ${name_ori} from './${name_all}'`)
+
+        //c2
+        if (name_ext === 'vue') {
+            c2.push(`        Vue.component('${name_kb}', ${name_ori})`)
+        }
+        else if (name_ext === 'mjs') {
+            let funName = _.toLower(name_ori)
+            funName = '$' + w.strdelleft(funName, 1)
+            c2.push(`        Vue.prototype.${funName} = ${name_ori}`)
+        }
+
+    })
+
+    //c
+    let c =
+`<script>
+${_.join(c1, '\r\n')}
+
+let WGeoVue = {
+    install: function(Vue) {
+${_.join(c2, '\r\n')}
+    }
+}
+
+export default WGeoVue
+</script>
+
+`
+
+    //write
+    //console.log(c)
+    fs.writeFileSync(fdSrc + fn_tar, c, 'utf8')
+
+}
+main()

package/toolg/modifyReadme.mjs

@@ -0,0 +1,4 @@
+import modifyReadme from 'w-package-tools/src/modifyReadme.mjs'
+
+
+modifyReadme()

package/vue.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    lintOnSave: false, //禁止eslint-loader於編譯時檢查語法
+    devServer: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:9000',
+                pathRewrite: {
+                    '^/api': '/api'
+                },
+            },
+            '/swdoc': {
+                target: 'http://localhost:9000',
+                pathRewrite: {
+                    '^/swdoc': '/swdoc'
+                },
+            },
+        }
+    },
+    //transpileDependencies: ['abc'],
+    //publicPath: process.env.NODE_ENV === 'production' ? '/abc/' : '/',
+}