Skip to content

Commit 8381ad0

Browse files
author
huangshuwei
committed
support CodeSandBox
1 parent ff42f1d commit 8381ad0

File tree

6 files changed

+253
-57
lines changed

6 files changed

+253
-57
lines changed

‎examples/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"less-loader": "^6.2.0",
4646
"lint-staged": "^9.5.0",
4747
"loader-utils": "^2.0.0",
48+
"lz-string": "^1.4.4",
4849
"markdown-it": "8.4.1",
4950
"markdown-it-anchor": "^5.3.0",
5051
"markdown-it-chain": "^1.3.0",

‎examples/src/comp/demo-block.vue‎

Lines changed: 27 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,31 @@
3636
controlText
3737
}}</span>
3838
</transition>
39-
<transition name="text-slide">
39+
<!-- <transition name="text-slide">
4040
<div
4141
v-show="hovering || isExpanded"
4242
size="small"
4343
type="text"
44-
class="slide-content codePenBtn"
45-
@click.stop="goCodepen"
44+
class="slide-content online-edit-btn"
4645
>
4746
{{ demoLangInfo.runInline }}
4847
</div>
48+
</transition> -->
49+
<transition name="text-slide">
50+
<div
51+
v-show="hovering || isExpanded"
52+
size="small"
53+
type="text"
54+
class="slide-content online-edit-btn"
55+
>
56+
<CodeSandBoxOnline
57+
:btn-name="demoLangInfo['openInCodeSandBox'] || ''"
58+
:version="onlineExample.version"
59+
:example-tpl="onlineExample.html"
60+
:example-script="onlineExample.script"
61+
:example-style="onlineExample.style"
62+
/>
63+
</div>
4964
</transition>
5065
</div>
5166
</div>
@@ -58,12 +73,15 @@ import { version } from "../../../package.json";
5873
5974
import locale from "./locale";
6075
import I18nMixins from "./mixins/i18n-mixins";
76+
import CodeSandBoxOnline from "@/comp/online-edit/code-sand-box/index.jsx";
6177
6278
export default {
79+
components: { CodeSandBoxOnline },
6380
mixins: [I18nMixins],
6481
data() {
6582
return {
66-
codepen: {
83+
onlineExample: {
84+
version: "",
6785
script: "",
6886
html: "",
6987
style: ""
@@ -136,53 +154,6 @@ export default {
136154
},
137155
138156
methods: {
139-
goCodepen() {
140-
const { script, html, style } = this.codepen;
141-
const resourcesTpl =
142-
"<scr" +
143-
'ipt src="//unpkg.com/vue/dist/vue.js"></scr' +
144-
"ipt>" +
145-
"\n<scr" +
146-
`ipt src="//unpkg.com/vue-easytable@${version}/libs/umd/index.js"></scr` +
147-
"ipt>";
148-
let jsTpl = (script || "")
149-
.replace(/export default/, "var Main =")
150-
.trim();
151-
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
152-
let cssTpl = `@import url("//unpkg.com/vue-easytable@${version}/libs/theme-default/index.css");\n${(
153-
style || ""
154-
).trim()}\n`;
155-
jsTpl = jsTpl
156-
? jsTpl +
157-
"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')"
158-
: "new Vue().$mount('#app')";
159-
const data = {
160-
js: jsTpl,
161-
css: cssTpl,
162-
html: htmlTpl
163-
};
164-
const form =
165-
document.getElementById("fiddle-form") ||
166-
document.createElement("form");
167-
while (form.firstChild) {
168-
form.removeChild(form.firstChild);
169-
}
170-
form.method = "POST";
171-
form.action = "https://codepen.io/pen/define/";
172-
form.target = "_blank";
173-
form.style.display = "none";
174-
175-
const input = document.createElement("input");
176-
input.setAttribute("name", "data");
177-
input.setAttribute("type", "hidden");
178-
input.setAttribute("value", JSON.stringify(data));
179-
180-
form.appendChild(input);
181-
document.body.appendChild(form);
182-
183-
form.submit();
184-
},
185-
186157
scrollHandler() {
187158
const {
188159
top,
@@ -205,6 +176,7 @@ export default {
205176
},
206177
207178
created() {
179+
this.onlineExample.version = version;
208180
const highlight = this.$slots.highlight;
209181
if (highlight && highlight[0]) {
210182
let code = "";
@@ -216,9 +188,9 @@ export default {
216188
}
217189
}
218190
if (code) {
219-
this.codepen.html = stripTemplate(code);
220-
this.codepen.script = stripScript(code);
221-
this.codepen.style = stripStyle(code);
191+
this.onlineExample.html = stripTemplate(code);
192+
this.onlineExample.script = stripScript(code);
193+
this.onlineExample.style = stripStyle(code);
222194
}
223195
}
224196
},
@@ -395,7 +367,7 @@ export default {
395367
transform: translateX(10px);
396368
}
397369
398-
.codePenBtn {
370+
.online-edit-btn {
399371
line-height: 44px;
400372
position: absolute;
401373
top: 0;

‎examples/src/comp/locale/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export default {
2525
description: "功能描述",
2626
expandCode: "展开代码",
2727
foldCode: "收起代码",
28-
runInline: "在线运行"
28+
openInCodepen: "在 Codepen 中编辑",
29+
openInCodeSandBox: "在 CodeSandBox 中编辑"
2930
},
3031
completeDemo: {
3132
theme: "暗黑主题：",
@@ -58,7 +59,8 @@ export default {
5859
description: "Code Description",
5960
expandCode: "Expand Code",
6061
foldCode: "Hide Code",
61-
runInline: "Open in CodePen"
62+
openInCodepen: "Edit in Codepen",
63+
openInCodeSandBox: "Edit in CodeSandBox"
6264
},
6365
completeDemo: {
6466
theme: "Dark Theme:",

‎examples/src/comp/online-edit/code-pen/index.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
export default {
2+
props: {
3+
// vue-easytable version
4+
version: {
5+
type: String,
6+
required: true
7+
},
8+
// vue tpl
9+
exampleTpl: {
10+
type: String,
11+
required: true
12+
},
13+
// scripts
14+
exampleScript: {
15+
type: String,
16+
default: ""
17+
},
18+
// style
19+
exampleStyle: {
20+
type: String,
21+
required: true
22+
}
23+
},
24+
methods: {
25+
goCodepen() {
26+
const { version, exampleScript, exampleTpl, exampleStyle } = this;
27+
const resourcesTpl =
28+
"<scr" +
29+
'ipt src="//unpkg.com/vue/dist/vue.js"></scr' +
30+
"ipt>" +
31+
"\n<scr" +
32+
`ipt src="//unpkg.com/vue-easytable@${version}/libs/umd/index.js"></scr` +
33+
"ipt>";
34+
let jsTpl = (exampleScript || "")
35+
.replace(/export default/, "var Main =")
36+
.trim();
37+
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${exampleTpl.trim()}\n</div>`;
38+
let cssTpl = `@import url("//unpkg.com/vue-easytable@${version}/libs/theme-default/index.css");\n${(
39+
exampleStyle || ""
40+
).trim()}\n`;
41+
jsTpl = jsTpl
42+
? jsTpl +
43+
"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')"
44+
: "new Vue().$mount('#app')";
45+
const data = {
46+
js: jsTpl,
47+
css: cssTpl,
48+
html: htmlTpl
49+
};
50+
const form =
51+
document.getElementById("fiddle-form") ||
52+
document.createElement("form");
53+
while (form.firstChild) {
54+
form.removeChild(form.firstChild);
55+
}
56+
form.method = "POST";
57+
form.action = "https://codepen.io/pen/define/";
58+
form.target = "_blank";
59+
form.style.display = "none";
60+
61+
const input = document.createElement("input");
62+
input.setAttribute("name", "data");
63+
input.setAttribute("type", "hidden");
64+
input.setAttribute("value", JSON.stringify(data));
65+
66+
form.appendChild(input);
67+
document.body.appendChild(form);
68+
69+
form.submit();
70+
}
71+
},
72+
73+
render() {
74+
return <div onClick={this.goCodepen()}>open in codepen</div>;
75+
}
76+
};

‎examples/src/comp/online-edit/code-sand-box/index.jsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import LZString from "lz-string";
2+
3+
export default {
4+
props: {
5+
btnName: {
6+
type: String,
7+
required: true
8+
},
9+
// vue-easytable version
10+
version: {
11+
type: String,
12+
required: true
13+
},
14+
// vue tpl
15+
exampleTpl: {
16+
type: String,
17+
required: true
18+
},
19+
// scripts
20+
exampleScript: {
21+
type: String,
22+
default: ""
23+
},
24+
// style
25+
exampleStyle: {
26+
type: String,
27+
required: true
28+
}
29+
},
30+
methods: {
31+
// get main js content
32+
getMainjsContent() {
33+
return `
34+
import Vue from "vue";
35+
import Example from "./Example.vue";
36+
37+
Vue.config.productionTip = false;
38+
39+
// import default theme
40+
import "vue-easytable/libs/theme-default/index.css";
41+
// import vue-easytable library
42+
import VueEasytable from "vue-easytable";
43+
44+
Vue.use(VueEasytable);
45+
46+
new Vue({
47+
render: (h) => h(Example)
48+
}).$mount("#app");
49+
`;
50+
},
51+
52+
// get example.vue content
53+
getExampleContent() {
54+
return `
55+
${this.exampleTpl}
56+
57+
<script>
58+
${this.exampleScript}
59+
</script>
60+
61+
<style>
62+
${this.exampleStyle}
63+
</style>
64+
`;
65+
},
66+
67+
getCodesanboxPrefillConfig() {
68+
const { version, getExampleContent, getMainjsContent } = this;
69+
70+
const codesandboxPackage = {
71+
title: `vue-easytable@${version} example`,
72+
main: "main.js",
73+
dependencies: {
74+
"@vue/cli-plugin-babel": "4.5.11",
75+
vue: "^2.6.11",
76+
"vue-easytable": version
77+
},
78+
devDependencies: {
79+
"@vue/cli-plugin-eslint": "4.1.1",
80+
"@vue/cli-service": "4.1.1",
81+
"vue-template-compiler": "^2.6.11"
82+
},
83+
scripts: {
84+
serve: "vue-cli-service serve",
85+
build: "vue-cli-service build",
86+
lint: "vue-cli-service lint"
87+
},
88+
browserslist: ["> 1%", "last 2 versions", "not ie <= 8"]
89+
};
90+
91+
const codesanboxPrefillConfig = {
92+
files: {
93+
"package.json": { content: codesandboxPackage },
94+
"Example.vue": { content: getExampleContent() },
95+
"main.js": { content: getMainjsContent() }
96+
}
97+
};
98+
99+
return codesanboxPrefillConfig;
100+
}
101+
},
102+
render() {
103+
const { getCodesanboxPrefillConfig, btnName } = this;
104+
105+
function compress(string) {
106+
return LZString.compressToBase64(string)
107+
.replace(/\+/g, "-") // Convert '+' to '-'
108+
.replace(/\//g, "_") // Convert '/' to '_'
109+
.replace(/=+$/, ""); // Remove ending '='
110+
}
111+
112+
const fromProps = {
113+
ref: "form"
114+
};
115+
116+
return (
117+
<div>
118+
<form
119+
{...fromProps}
120+
action="https://codesandbox.io/api/v1/sandboxes/define"
121+
method="POST"
122+
target="_blank"
123+
onClick={() => {
124+
console.log(getCodesanboxPrefillConfig());
125+
this.$refs[fromProps.ref].submit();
126+
}}
127+
>
128+
<input
129+
type="hidden"
130+
name="parameters"
131+
value={compress(
132+
JSON.stringify(getCodesanboxPrefillConfig())
133+
)}
134+
/>
135+
{ btnName }
136+
</form>
137+
</div>
138+
);
139+
}
140+
};

‎examples/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6993,6 +6993,11 @@ lru-cache@^5.1.1:
69936993
dependencies:
69946994
yallist "^3.0.2"
69956995

6996+
lz-string@^1.4.4:
6997+
version "1.4.4"
6998+
resolved "https://registry.npm.taobao.org/lz-string/download/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
6999+
integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
7000+
69967001
make-dir@^2.0.0, make-dir@^2.1.0:
69977002
version "2.1.0"
69987003
resolved "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"

0 commit comments

Comments
 (0)