JSBOX-UTIL JS

JSBOX-UTIL by theajack

English | | vue | react

js,

0.

0.1

jsboxcdngithub

js

window.jsboxCode = ``; //  javascript

json

window.jsboxCode = {
    lib: '', // cdn  jsbox, name
    code: ``,
    lang: 'javascript', //  javascript  javascript, html, ... jsbox lang type
    theme: 'dark', //  dark  darklight
    wrapCode: true, // jsfalse
    needUI: true, // ui false
    useDefaultUI: true, // ui false
    hideLog: false, // log false
    clearWhenReRun: false, // html false lang=html 
}

JsBox list

['jquery', 'vue', 'react', 'react-dom', 'angularjs', 'vuex', 'redux', 'loadsh', 'virtual-dom', 'node-html-parser', 'jest', 'mocha', 'moment', 'dayjs', 'underscore', 'axios', 'qrcode', 'backbone', 'js-xlsx', 'recast', 'cnchar', 'cnchar-poly', 'cnchar-order', 'cnchar-trad', 'cnchar-draw', 'cnchar-idiom', 'cnchar-xhy', 'cnchar-radical', 'cnchar-all', 'easy-icon', 'element-ui', 'element-ui-style']

0.1.1 github

github jsbox.code.js

url https://shiyix.cn/jsbox?github=user.rep.file

user github

rep @xxx releasebranchcommit releasemaster

file jsbox.code.js

https://shiyix.cn/jsbox?github=theajack.pure-v

https://shiyix.cn/jsbox?github=theajack.pure-v@master

https://shiyix.cn/jsbox?github=theajack.pure-v.helper/custom.code.js

0.1.2 cdn

js code http http://xxx.com/config.js

https://shiyix.cn/jsbox?codeSrc=${decodeURIComponent('http://xxx.com/config.js')}

0.2

0.2.1. jsbox

jsbox

0.2.2.

0.2.2.1. js

0.2.2.2. dom

html

0.2.3.

0.3

configjswindowjson

window.jsbox_config = {
    libs: {
        'loadsh': 'xxx', // 
        'jquery': {
            url: 'xxx', // 
            type: 'script', //  jscssurl
            version: 'xxx', //  
        },
        'cnchar': 'jsbox.cnchar', // jsboxjsbox.xxx
    },
    codes: { // 
        'helloWorld': 'console.log("Hello world")', //  
        'testLoadsh': {
            code: '_.cloneDeep({a:1})', //  
            dep: ['loadsh', 'jsbox.cnchar'], //  libs, jsboxjsbox.xxx
        },
    }
}

https://shiyix.cn/jsbox?config={url}&id=helloWorld}

github config jsbox.config.js 0.1.1

https://shiyix.cn/jsbox?githubConfig={user}.{rep}

https://shiyix.cn/jsbox?githubConfig={user}.{rep}.{file}

1. libs: cdn
2. codes: codescodessearchidjsboxidjsboxcodesstringjsboxid

1. API

0.

JSBox jsjs

1. npm

npm install jsbox-util

import JSBox from 'jsbox-util';

2. cdn

<script src="https://cdn.jsdelivr.net/npm/jsbox-util/jsbox.min.js"></script>

3.

3.1 JSBox

// , 
JSBox.config({
    theme?: string;
    code?: string;
    lib?: Array<string>;
    config?: string;
    githubConfig?: string;
    id?: string;
    env?: string;
    lang?: string;
    run?: boolean;
    mes?: boolean;
    remind?: boolean;
    codeSrc?: string;
    github?: string;
})

JSBox.open(); // jsbox

JSBox.open({
    ... // JSBox
});

theme, lib, env, lang 3.3

3.2 JSBox

......

3.3

1. theme: darklight, dark
2. code: encodeURIComponent
3. lib: urljsbox encodeURIComponent
   urljsboxjsboxunpkg
4. config: url
5. id: idconfig
6. env: jsbox
7. lang: env config+id
8. run: code run=false
9. remind: remind=false
10. mes: mes=false

2.

2.1.

1. jshtmlcss
2. cdn
4. html
5. vscode
6. log

2.2.

1. ctrl + :
2. ctrl - :
3. ctrl m :
4. ctrl d :
5. ctrl d :
6. ctrl s :
7. ctrl e :
8. ctrl q :
9. ctrl n :
10. ctrl l :
11. ctrl e : log
12. ctrl enter :

2.3. search

1. theme=dark: darknormal
2. code=xxx: encodeURIComponent
3. lib=Array<link|name>: urljsbox encodeURIComponent
   urljsboxjsboxunpkg
4. config=link: url
5. id=string: idconfig
6. env: jsbox

config > env > lib

2.4. config

0.3

2.5. hash

1. #saved
2. #hello

2.6.

jsbox

1. log(arg1,arg2,...);
2. copy(string);

2.7

1. github github=user.repo@xxxxxxreleaserelease
2. jsboxjsdelivr https://purge.jsdelivr.net/gh/{user}/{repo}/jsbox.code.js