Skip to content

Commit

Permalink
demo: apply beta croffle #621 #702
Browse files Browse the repository at this point in the history
  • Loading branch information
daybrush committed Oct 22, 2022
1 parent f9d089b commit d96d5ce
Show file tree
Hide file tree
Showing 7 changed files with 807 additions and 39 deletions.
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@
"packages": [
"packages/*",
"packages/ngx-moveable/projects/ngx-moveable"
],
"nohoist": [
"**/vue-tsc",
"**/vue-tsc/**"
]
},
"resolutions": {
Expand Down
3 changes: 3 additions & 0 deletions packages/react-moveable/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
stories/**/vue3/
stories/**/vue2/
stories/**/svelte/
2 changes: 1 addition & 1 deletion packages/react-moveable/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ module.exports = {
],
addons: [
"@storybook/addon-docs/register",
"storybook-addon-preview/register",
"@storybook/addon-controls/register",
"@storybook/addon-viewport/register",
"storybook-addon-preview/register",
"storybook-dark-mode/register",
"@storybook/addon-interactions",
],
Expand Down
158 changes: 158 additions & 0 deletions packages/react-moveable/croffle.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
const {
ReactCroissant,
VueWaffle,
ConvertDefaultModulePrefixSirup,
SvelteWaffle,
} = require("croffle");


/**
* @param {import("croffle").Sirup} sirup
*/
function vueKeyconSirup(sirup) {
sirup.requestId({
path: [/vue[3]?-keycon/g, "useKeycon"],
named: ["isKeydown"],
}, node => {
// use ref
return sirup.utils.createInlinePropertyAccess(node, "value");
});
}
/**
* @param {import("croffle").Sirup} sirup
*/
function svelteKeyconSirup(sirup){
sirup.requestId({
path: [/svelte-keycon/g, "useKeycon"],
named: ["isKeydown"],
}, node => {
// use writable
return sirup.ts.factory.createIdentifier(`$${node.name.escapedText}`);
});
}

/**
* @param {import("croffle").Sirup} sirup
*/
function PreviewPropsSirup(sirup) {
sirup.requestProps((node, { data }) => {
if (!data.props) {
data.props = [];
}
node.members.forEach(member => {
const propName = member.name.escapedText;

data.props.push(propName);
});

return sirup.utils.copyInterfaceDeclaration(node, { members: [] });
});

sirup.requestLifeCycle("created", (node, { data }) => {
if (!data.props || !data.props.length) {
return;
}

const statements = data.props.map(name => {
return sirup.utils.createInlineCroffleAssignment(
name,
"Any",
sirup.factory.createStringLiteral(`$preview_${name}`),
);
});
const body = node.body;

return sirup.utils.copyFunctionDeclaration(
node,
{
body: sirup.factory.updateBlock(body, [
...statements,
...body.statements,
]),
},
);
});
};

/**
* @type {import("@croffle/bakery").CroffleConfig[]}
*/
const config = [
{
targets: "stories/**/+([0-9A-Za-z])-*/React*App.tsx",
croissant: () => {
const croissant = new ReactCroissant();

croissant.addSirup(PreviewPropsSirup);
croissant.addSirup(sirup => {
sirup.convertImport("@/react-moveable", "react-moveable");
});
croissant.addSirup(ConvertDefaultModulePrefixSirup);
return croissant;
},
waffle: [
// Vue 3
(defrosted) => {
const hasKeycon = !!defrosted.allRequires["react-keycon"];
const waffle = new VueWaffle();

waffle.addSirup(ConvertDefaultModulePrefixSirup);


if (hasKeycon) {
waffle.addSirup(
sirup => {
sirup.convertImport("vue3-keycon", "vue-keycon");
},
vueKeyconSirup,
);
}
return {
dist: `./{type}/{name}/App{ext}`,
waffle,
};
},
// Vue 2
(defrosted) => {
const hasKeycon = !!defrosted.allRequires["react-keycon"];
const waffle = new VueWaffle({
useVue2: true,
useOptionsAPI: !hasKeycon,
});

waffle.addSirup(ConvertDefaultModulePrefixSirup);

if (hasKeycon) {
waffle.addSirup(
sirup => {
sirup.convertImport("vue-keycon", "vue2-keycon");
},
vueKeyconSirup,
);
}
return {
dist: `./{type}/{name}/App{ext}`,
waffle,
};
},
// Svelte
(defrosted) => {
const hasKeycon = !!defrosted.allRequires["react-keycon"];
const waffle = new SvelteWaffle();

waffle.addSirup(ConvertDefaultModulePrefixSirup);

if (hasKeycon) {
waffle.addSirup(svelteKeyconSirup);
}
return {
dist: `./{type}/{name}/App{ext}`,
waffle,
};
},
],
},
];


module.exports = config;
5 changes: 4 additions & 1 deletion packages/react-moveable/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"scripts": {
"lint": "eslint ./src/ --ext .ts,.tsx",
"storybook": "start-storybook -p 6006",
"bake": "bake",
"build": "npm run lint && rollup -c && npm run declaration && print-sizes ./dist ",
"build:storybook": "build-storybook -o ../../demo/storybook2",
"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json"
Expand Down Expand Up @@ -55,6 +56,7 @@
"homepage": "https://daybrush.com/moveable",
"devDependencies": {
"@babel/core": "^7.7.2",
"@croffle/bakery": "^0.0.6",
"@daybrush/builder": "^0.1.0",
"@daybrush/tester": "^0.1.3",
"@egjs/build-helper": "^0.1.2",
Expand All @@ -72,12 +74,13 @@
"@storybook/react": "6.5.10",
"@storybook/test-runner": "^0.7.1",
"@storybook/testing-library": "^0.0.13",
"@types/node": "^14.6.0",
"@types/node": "^18.11.3",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@typescript-eslint/eslint-plugin": "^3.9.1",
"@typescript-eslint/parser": "^3.9.1",
"babel-loader": "^8.0.6",
"croffle": "^0.0.4",
"css-loader": "^5.0.1",
"eslint": "^7.7.0",
"eslint-plugin-import": "^2.22.1",
Expand Down
15 changes: 14 additions & 1 deletion packages/react-moveable/stories/utils/story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function makeStoryGroup(title: string, module: NodeModule) {
// codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable"]),
language: "tsx",
});

// Vue3
try {
const vueCode = require(`!!raw-loader!@/stories/${directory}vue3/${fileName}/App.vue`).default;

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

Expand All @@ -69,6 +70,18 @@ export function makeStoryGroup(title: string, module: NodeModule) {
});
// eslint-disable-next-line no-empty
} catch (e) {}
// Svelte
try {
const svelteCode = require(`!!raw-loader!@/stories/${directory}svelte/${fileName}/App.svelte`).default;

previews.push({
tab: "Svelte",
template: convertTemplate(svelteCode, /"\$preview_([^"]+)"/g),
copy: true,
language: "html",
});
// eslint-disable-next-line no-empty
} catch (e) {}
} else if (text) {
previews.unshift({
tab: "React",
Expand Down
Loading

0 comments on commit d96d5ce

Please sign in to comment.