Skip to content

Commit

Permalink
feat(framework7-vue): move to pure ES module package
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Oct 4, 2021
1 parent 6abf98a commit e9adee6
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 83 deletions.
8 changes: 0 additions & 8 deletions packages/vue/bundle/package.json
View file

This file was deleted.

11 changes: 7 additions & 4 deletions packages/vue/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
"name": "framework7-vue",
"version": "6.3.5",
"description": "Build full featured iOS & Android apps using Framework7 & Vue",
"main": "cjs/framework7-vue.js",
"module": "esm/framework7-vue.js",
"jsnext:main": "esm/framework7-vue.js",
"type": "module",
"exports": {
".": "./framework7-vue.js",
"./bundle": "./framework7-vue-bundle.js",
"./components/*": "./components/*"
},
"typings": "framework7-vue.d.ts",
"repository": {
"type": "git",
Expand Down Expand Up @@ -42,4 +45,4 @@
"type": "patreon",
"url": "https://www.patreon.com/framework7"
}
}
}
2 changes: 1 addition & 1 deletion scripts/build-vue-typings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ function buildTypings(cb) {
fs.readFileSync(`src/vue/components/${fileName}`, 'utf-8'),
);

fs.writeFileSync(`${output}/components/${fileBase}/${fileBase}.d.ts`, typingsContent);
fs.writeFileSync(`${output}/components/${fileBase}.d.ts`, typingsContent);
});

const mainTypings = fs
Expand Down
85 changes: 15 additions & 70 deletions scripts/build-vue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const transformVueComponent = require('./transform-vue-component');

// Build Vue
async function buildVue(cb) {
const env = process.env.NODE_ENV || 'development';
const buildPath = getOutput();

const files = fs.readdirSync('src/vue/components').filter((file) => file.indexOf('.vue') > 0);
Expand All @@ -30,19 +29,6 @@ async function buildVue(cb) {
componentImports.push(`import f7${componentName} from './components/${fileBase}';`);
componentExports.push(`f7${componentName}`);
componentsRegistrations.push(`app.component('f7-${fileBase}', f7${componentName})`);
const json = {
name: `framework7-vue/${fileBase}`,
private: true,
sideEffects: false,
main: `../../cjs/components/${fileBase}.js`,
module: `../../esm/components/${fileBase}.js`,
'jsnext:main': `../../esm/components/${fileBase}.js`,
typings: `${fileBase}.d.ts`,
};
fs.writeFileSync(
`${buildPath}/vue/components/${fileBase}/package.json`,
JSON.stringify(json, '', 2),
);
transformVueComponent(
`src/vue/components/${fileName}`,
`src/vue-temp/${fileName.replace('.vue', '.js')}`,
Expand All @@ -54,72 +40,31 @@ async function buildVue(cb) {
.replace('// IMPORT_COMPONENTS', componentImports.join('\n'))
.replace('// EXPORT_COMPONENTS', `export { ${componentExports.join(', ')} }`);

const buildCJS = async () => {
fs.writeFileSync(`${buildPath}/vue/cjs/framework7-vue.js`, pluginContent);

await exec.promise(
`MODULES=cjs npx babel --config-file ./babel-vue.config.js src/vue --out-dir ${buildPath}/vue/cjs --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx --extensions .js`,
);
await exec.promise(
`MODULES=cjs npx babel --config-file ./babel-vue.config.js src/vue-temp --out-dir ${buildPath}/vue/cjs/components --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx`,
);
await exec.promise(
`MODULES=cjs npx babel --config-file ./babel-vue.config.js ${buildPath}/vue/cjs/framework7-vue.js --out-file ${buildPath}/vue/cjs/framework7-vue.js`,
);

const cjsContent = fs.readFileSync(`${buildPath}/vue/cjs/framework7-vue.js`, 'utf-8');

fs.writeFileSync(
`${buildPath}/vue/cjs/framework7-vue.js`,
`${bannerReact.trim()}\n${cjsContent}`,
);
// Bundle
const bundleContent = `
exports.registerComponents = function registerComponents (app) {
${componentsRegistrations.join(';\n ')}
}
`.trim();
fs.writeFileSync(
`${buildPath}/vue/cjs/framework7-vue-bundle.js`,
`${bannerReact.trim()}\n${cjsContent}\n${bundleContent}`,
);
};

const buildEMS = async () => {
fs.writeFileSync(`${buildPath}/vue/esm/framework7-vue.js`, pluginContent);
fs.writeFileSync(`${buildPath}/vue/framework7-vue.js`, pluginContent);

await exec.promise(
`MODULES=esm npx babel --config-file ./babel-vue.config.js src/vue --out-dir ${buildPath}/vue/esm --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx --extensions .js`,
);
await exec.promise(
`MODULES=esm npx babel --config-file ./babel-vue.config.js src/vue --out-dir ${buildPath}/vue --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx --extensions .js`,
);

await exec.promise(
`MODULES=esm npx babel --config-file ./babel-vue.config.js src/vue-temp --out-dir ${buildPath}/vue/esm/components --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx`,
);
await exec.promise(
`MODULES=esm npx babel --config-file ./babel-vue.config.js src/vue-temp --out-dir ${buildPath}/vue/components --ignore "src/vue/framework7-vue.js","*.ts","*.jsx",*jsx`,
);

const esmContent = fs.readFileSync(`${buildPath}/vue/esm/framework7-vue.js`, 'utf-8');
const esmContent = fs.readFileSync(`${buildPath}/vue/framework7-vue.js`, 'utf-8');

fs.writeFileSync(
`${buildPath}/vue/esm/framework7-vue.js`,
`${bannerReact.trim()}\n${esmContent}`,
);
fs.writeFileSync(`${buildPath}/vue/framework7-vue.js`, `${bannerReact.trim()}\n${esmContent}`);

// Bundle
const bundleContent = `
// Bundle
const bundleContent = `
function registerComponents(app) {
${componentsRegistrations.join(';\n ')}
}
export { registerComponents }
`.trim();
fs.writeFileSync(
`${buildPath}/vue/esm/framework7-vue-bundle.js`,
`${bannerReact.trim()}\n${esmContent}\n${bundleContent}`,
);
};

if (env === 'production') {
await buildCJS();
}
await buildEMS();
fs.writeFileSync(
`${buildPath}/vue/framework7-vue-bundle.js`,
`${bannerReact.trim()}\n${esmContent}\n${bundleContent}`,
);

if (cb) cb();
}
Expand Down

0 comments on commit e9adee6

Please sign in to comment.