Skip to content

Commit 74b8e4d

Browse files
nolimits4webnolimits4web
committed
feat(framework7-svelte): move to pure ES module package and keep only .svelte components
1 parent e9adee6 commit 74b8e4d

File tree

3 files changed

+25
-93
lines changed

3 files changed

+25
-93
lines changed

‎packages/svelte/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
"name": "framework7-svelte",
33
"version": "6.3.5",
44
"description": "Build full featured iOS & Android apps using Framework7 & Svelte",
5-
"main": "cjs/framework7-svelte.js",
6-
"module": "esm/framework7-svelte.js",
7-
"jsnext:main": "esm/framework7-svelte.js",
8-
"svelte": "esm/framework7-svelte-src.js",
5+
"type": "module",
6+
"exports": {
7+
".": "./framework7-svelte.js",
8+
"./components/*": "./components/*"
9+
},
910
"typings": "framework7-svelte.d.ts",
1011
"repository": {
1112
"type": "git",
@@ -42,4 +43,4 @@
4243
"type": "patreon",
4344
"url": "https://www.patreon.com/framework7"
4445
}
45-
}
46+
}

‎scripts/build-svelte-typings.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function buildTypings(cb) {
129129
reactContent,
130130
);
131131

132-
fs.writeFileSync(`${output}/components/${fileBase}/${fileBase}.d.ts`, typingsContent);
132+
fs.writeFileSync(`${output}/components/${fileBase}.d.ts`, typingsContent);
133133
});
134134

135135
const mainTypings = fs

‎scripts/build-svelte.js‎

Lines changed: 18 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,18 @@
44
/* eslint no-param-reassign: ["off"] */
55

66
const exec = require('exec-sh');
7-
const svelte = require('svelte/compiler');
87
const bannerSvelte = require('./banners/svelte');
98
const getOutput = require('./get-output');
109
const fs = require('./utils/fs-extra');
1110

12-
const compileSvelteComponents = (buildPath, format) => {
13-
const svelteComponents = fs
14-
.readdirSync('src/svelte/components')
15-
.filter((fileName) => fileName.includes('.svelte'));
16-
17-
svelteComponents.forEach((fileName) => {
18-
const fileContent = fs.readFileSync(`src/svelte/components/${fileName}`, 'utf-8');
19-
if (format === 'esm') {
20-
// copy .svelte files
21-
const fileContentFixImports = fileContent.replace(
22-
/from '.\/([a-z-]*)';/g,
23-
`from './$1.svelte';`,
24-
);
25-
fs.writeFileSync(`${buildPath}/svelte/${format}/svelte/${fileName}`, fileContentFixImports);
26-
}
27-
const fileResult = svelte.compile(fileContent, {
28-
format,
29-
filename: fileName,
30-
});
31-
fs.writeFileSync(
32-
`${buildPath}/svelte/${format}/components/${fileName.replace('.svelte', '.js')}`,
33-
fileResult.js.code,
34-
);
35-
});
36-
};
37-
3811
// Build Svelte
3912
async function buildSvelte(cb) {
40-
const env = process.env.NODE_ENV || 'development';
4113
const buildPath = getOutput();
4214

4315
const files = fs.readdirSync('src/svelte/components').filter((file) => file.indexOf('.d.ts') < 0);
4416
const componentImports = [];
4517
const componentExports = [];
18+
const svelteComponents = [];
4619

4720
files.forEach((fileName) => {
4821
const componentName = fileName
@@ -51,78 +24,36 @@ async function buildSvelte(cb) {
5124
.split('-')
5225
.map((word) => word[0].toUpperCase() + word.substr(1))
5326
.join('');
54-
const fileBase = fileName.replace('.svelte', '').replace('.js', '');
55-
componentImports.push(`import ${componentName} from './components/${fileBase}';`);
27+
componentImports.push(`import ${componentName} from './components/${fileName}';`);
5628
componentExports.push(componentName);
57-
const json = {
58-
name: `framework7-svelte/${fileBase}`,
59-
private: true,
60-
sideEffects: false,
61-
main: `../../cjs/components/${fileBase}.js`,
62-
module: `../../esm/components/${fileBase}.js`,
63-
'jsnext:main': `../../esm/components/${fileBase}.js`,
64-
svelte: `../../esm/svelte/${fileBase}.svelte`,
65-
typings: `${fileBase}.d.ts`,
66-
};
67-
fs.writeFileSync(
68-
`${buildPath}/svelte/components/${fileBase}/package.json`,
69-
JSON.stringify(json, '', 2),
70-
);
29+
if (fileName.includes('.svelte')) svelteComponents.push(fileName);
7130
});
7231

7332
const pluginContent = fs
7433
.readFileSync('src/svelte/framework7-svelte.js', 'utf-8')
7534
.replace('// IMPORT_COMPONENTS', componentImports.join('\n'))
7635
.replace('// EXPORT_COMPONENTS', `export { ${componentExports.join(', ')} }`);
7736

78-
const buildCJS = async () => {
79-
fs.writeFileSync(`${buildPath}/svelte/cjs/framework7-svelte.js`, pluginContent);
80-
81-
await exec.promise(
82-
`MODULES=cjs npx babel --config-file ./babel-svelte.config.js src/svelte --out-dir ${buildPath}/svelte/cjs --ignore "src/svelte/framework7-svelte.js","*.svelte"`,
83-
);
84-
await exec.promise(
85-
`MODULES=cjs npx babel --config-file ./babel-svelte.config.js ${buildPath}/svelte/cjs/framework7-svelte.js --out-file ${buildPath}/svelte/cjs/framework7-svelte.js`,
86-
);
87-
88-
const cjsContent = fs.readFileSync(`${buildPath}/svelte/cjs/framework7-svelte.js`, 'utf-8');
37+
fs.writeFileSync(`${buildPath}/svelte/framework7-svelte.js`, pluginContent);
8938

90-
fs.writeFileSync(
91-
`${buildPath}/svelte/cjs/framework7-svelte.js`,
92-
`${bannerSvelte.trim()}\n${cjsContent}`,
93-
);
94-
95-
compileSvelteComponents(buildPath, 'cjs');
96-
};
97-
98-
const buildEMS = async () => {
99-
fs.writeFileSync(`${buildPath}/svelte/esm/framework7-svelte.js`, pluginContent);
100-
101-
await exec.promise(
102-
`MODULES=esm npx babel --config-file ./babel-svelte.config.js src/svelte --out-dir ${buildPath}/svelte/esm --ignore "src/svelte/framework7-svelte.js","*.svelte"`,
103-
);
39+
await exec.promise(
40+
`MODULES=esm npx babel --config-file ./babel-svelte.config.js src/svelte --out-dir ${buildPath}/svelte --ignore "src/svelte/framework7-svelte.js","*.svelte"`,
41+
);
10442

105-
const esmContent = fs.readFileSync(`${buildPath}/svelte/esm/framework7-svelte.js`, 'utf-8');
106-
107-
fs.writeFileSync(
108-
`${buildPath}/svelte/esm/framework7-svelte.js`,
109-
`${bannerSvelte.trim()}\n${esmContent}`,
43+
// Copy svelte components
44+
svelteComponents.forEach((fileName) => {
45+
fs.copyFileSync(
46+
`src/svelte/components/${fileName}`,
47+
`${buildPath}/svelte/components/${fileName}`,
11048
);
49+
});
11150

112-
const svelteSourceContent = esmContent
113-
.replace(/\.\/components\/([a-z-]*)/g, './svelte/$1.svelte')
114-
.replace(/\.\/svelte\/swiper([a-z-]*).svelte/g, './components/swiper$1')
115-
.replace(/\.\/svelte\/skeleton([a-z-]*).svelte/g, './components/skeleton$1');
116-
117-
fs.writeFileSync(`${buildPath}/svelte/esm/framework7-svelte-src.js`, `${svelteSourceContent}`);
118-
119-
compileSvelteComponents(buildPath, 'esm');
120-
};
51+
const esmContent = fs.readFileSync(`${buildPath}/svelte/framework7-svelte.js`, 'utf-8');
12152

122-
if (env === 'production') {
123-
await buildCJS();
124-
}
125-
await buildEMS();
53+
fs.writeFileSync(
54+
`${buildPath}/svelte/framework7-svelte.js`,
55+
`${bannerSvelte.trim()}\n${esmContent}`,
56+
);
12657

12758
if (cb) cb();
12859
}

0 commit comments

Comments
 (0)