Skip to content

Commit d96d5ce

Browse files
daybrushdaybrush
committed
demo: apply beta croffle #621 #702 
1 parent f9d089b commit d96d5ce

File tree

7 files changed

+807
-39
lines changed

7 files changed

+807
-39
lines changed

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@
7373
"packages": [
7474
"packages/*",
7575
"packages/ngx-moveable/projects/ngx-moveable"
76+
],
77+
"nohoist": [
78+
"**/vue-tsc",
79+
"**/vue-tsc/**"
7680
]
7781
},
7882
"resolutions": {

‎packages/react-moveable/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
stories/**/vue3/
25+
stories/**/vue2/
26+
stories/**/svelte/

‎packages/react-moveable/.storybook/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ module.exports = {
3232
],
3333
addons: [
3434
"@storybook/addon-docs/register",
35+
"storybook-addon-preview/register",
3536
"@storybook/addon-controls/register",
3637
"@storybook/addon-viewport/register",
37-
"storybook-addon-preview/register",
3838
"storybook-dark-mode/register",
3939
"@storybook/addon-interactions",
4040
],

‎packages/react-moveable/croffle.config.js

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
const {
2+
ReactCroissant,
3+
VueWaffle,
4+
ConvertDefaultModulePrefixSirup,
5+
SvelteWaffle,
6+
} = require("croffle");
7+
8+
9+
/**
10+
* @param {import("croffle").Sirup} sirup
11+
*/
12+
function vueKeyconSirup(sirup) {
13+
sirup.requestId({
14+
path: [/vue[3]?-keycon/g, "useKeycon"],
15+
named: ["isKeydown"],
16+
}, node => {
17+
// use ref
18+
return sirup.utils.createInlinePropertyAccess(node, "value");
19+
});
20+
}
21+
/**
22+
* @param {import("croffle").Sirup} sirup
23+
*/
24+
function svelteKeyconSirup(sirup){
25+
sirup.requestId({
26+
path: [/svelte-keycon/g, "useKeycon"],
27+
named: ["isKeydown"],
28+
}, node => {
29+
// use writable
30+
return sirup.ts.factory.createIdentifier(`$${node.name.escapedText}`);
31+
});
32+
}
33+
34+
/**
35+
* @param {import("croffle").Sirup} sirup
36+
*/
37+
function PreviewPropsSirup(sirup) {
38+
sirup.requestProps((node, { data }) => {
39+
if (!data.props) {
40+
data.props = [];
41+
}
42+
node.members.forEach(member => {
43+
const propName = member.name.escapedText;
44+
45+
data.props.push(propName);
46+
});
47+
48+
return sirup.utils.copyInterfaceDeclaration(node, { members: [] });
49+
});
50+
51+
sirup.requestLifeCycle("created", (node, { data }) => {
52+
if (!data.props || !data.props.length) {
53+
return;
54+
}
55+
56+
const statements = data.props.map(name => {
57+
return sirup.utils.createInlineCroffleAssignment(
58+
name,
59+
"Any",
60+
sirup.factory.createStringLiteral(`$preview_${name}`),
61+
);
62+
});
63+
const body = node.body;
64+
65+
return sirup.utils.copyFunctionDeclaration(
66+
node,
67+
{
68+
body: sirup.factory.updateBlock(body, [
69+
...statements,
70+
...body.statements,
71+
]),
72+
},
73+
);
74+
});
75+
};
76+
77+
/**
78+
* @type {import("@croffle/bakery").CroffleConfig[]}
79+
*/
80+
const config = [
81+
{
82+
targets: "stories/**/+([0-9A-Za-z])-*/React*App.tsx",
83+
croissant: () => {
84+
const croissant = new ReactCroissant();
85+
86+
croissant.addSirup(PreviewPropsSirup);
87+
croissant.addSirup(sirup => {
88+
sirup.convertImport("@/react-moveable", "react-moveable");
89+
});
90+
croissant.addSirup(ConvertDefaultModulePrefixSirup);
91+
return croissant;
92+
},
93+
waffle: [
94+
// Vue 3
95+
(defrosted) => {
96+
const hasKeycon = !!defrosted.allRequires["react-keycon"];
97+
const waffle = new VueWaffle();
98+
99+
waffle.addSirup(ConvertDefaultModulePrefixSirup);
100+
101+
102+
if (hasKeycon) {
103+
waffle.addSirup(
104+
sirup => {
105+
sirup.convertImport("vue3-keycon", "vue-keycon");
106+
},
107+
vueKeyconSirup,
108+
);
109+
}
110+
return {
111+
dist: `./{type}/{name}/App{ext}`,
112+
waffle,
113+
};
114+
},
115+
// Vue 2
116+
(defrosted) => {
117+
const hasKeycon = !!defrosted.allRequires["react-keycon"];
118+
const waffle = new VueWaffle({
119+
useVue2: true,
120+
useOptionsAPI: !hasKeycon,
121+
});
122+
123+
waffle.addSirup(ConvertDefaultModulePrefixSirup);
124+
125+
if (hasKeycon) {
126+
waffle.addSirup(
127+
sirup => {
128+
sirup.convertImport("vue-keycon", "vue2-keycon");
129+
},
130+
vueKeyconSirup,
131+
);
132+
}
133+
return {
134+
dist: `./{type}/{name}/App{ext}`,
135+
waffle,
136+
};
137+
},
138+
// Svelte
139+
(defrosted) => {
140+
const hasKeycon = !!defrosted.allRequires["react-keycon"];
141+
const waffle = new SvelteWaffle();
142+
143+
waffle.addSirup(ConvertDefaultModulePrefixSirup);
144+
145+
if (hasKeycon) {
146+
waffle.addSirup(svelteKeyconSirup);
147+
}
148+
return {
149+
dist: `./{type}/{name}/App{ext}`,
150+
waffle,
151+
};
152+
},
153+
],
154+
},
155+
];
156+
157+
158+
module.exports = config;

‎packages/react-moveable/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"scripts": {
1313
"lint": "eslint ./src/ --ext .ts,.tsx",
1414
"storybook": "start-storybook -p 6006",
15+
"bake": "bake",
1516
"build": "npm run lint && rollup -c && npm run declaration && print-sizes ./dist ",
1617
"build:storybook": "build-storybook -o ../../demo/storybook2",
1718
"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json"
@@ -55,6 +56,7 @@
5556
"homepage": "https://daybrush.com/moveable",
5657
"devDependencies": {
5758
"@babel/core": "^7.7.2",
59+
"@croffle/bakery": "^0.0.6",
5860
"@daybrush/builder": "^0.1.0",
5961
"@daybrush/tester": "^0.1.3",
6062
"@egjs/build-helper": "^0.1.2",
@@ -72,12 +74,13 @@
7274
"@storybook/react": "6.5.10",
7375
"@storybook/test-runner": "^0.7.1",
7476
"@storybook/testing-library": "^0.0.13",
75-
"@types/node": "^14.6.0",
77+
"@types/node": "^18.11.3",
7678
"@types/react": "^16.9.17",
7779
"@types/react-dom": "^16.9.4",
7880
"@typescript-eslint/eslint-plugin": "^3.9.1",
7981
"@typescript-eslint/parser": "^3.9.1",
8082
"babel-loader": "^8.0.6",
83+
"croffle": "^0.0.4",
8184
"css-loader": "^5.0.1",
8285
"eslint": "^7.7.0",
8386
"eslint-plugin-import": "^2.22.1",

‎packages/react-moveable/stories/utils/story.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function makeStoryGroup(title: string, module: NodeModule) {
4545
// codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable"]),
4646
language: "tsx",
4747
});
48-
48+
// Vue3
4949
try {
5050
const vueCode = require(`!!raw-loader!@/stories/${directory}vue3/${fileName}/App.vue`).default;
5151

@@ -58,6 +58,7 @@ export function makeStoryGroup(title: string, module: NodeModule) {
5858
// eslint-disable-next-line no-empty
5959
} catch (e) {
6060
}
61+
// Vue2
6162
try {
6263
const vueCode = require(`!!raw-loader!@/stories/${directory}vue2/${fileName}/App.vue`).default;
6364

@@ -69,6 +70,18 @@ export function makeStoryGroup(title: string, module: NodeModule) {
6970
});
7071
// eslint-disable-next-line no-empty
7172
} catch (e) {}
73+
// Svelte
74+
try {
75+
const svelteCode = require(`!!raw-loader!@/stories/${directory}svelte/${fileName}/App.svelte`).default;
76+
77+
previews.push({
78+
tab: "Svelte",
79+
template: convertTemplate(svelteCode, /"\$preview_([^"]+)"/g),
80+
copy: true,
81+
language: "html",
82+
});
83+
// eslint-disable-next-line no-empty
84+
} catch (e) {}
7285
} else if (text) {
7386
previews.unshift({
7487
tab: "React",

0 commit comments

Comments
 (0)