From 6d87bcfe9e404bcaee7e779590601ce98ff06f43 Mon Sep 17 00:00:00 2001 From: mhatvan Date: Sat, 12 Sep 2020 23:18:37 +0200 Subject: [PATCH 1/5] feat: rollup typescript support (#252) - fix issue with rollupConfig replace for server config - fix commonjs() part not getting replaced properly - update for tsconfig settings - formatting improvements - file uses tabs instead of spaces now - bump @rollup/plugin-typescript to ^6.0.0 Signed-off-by: mhatvan --- scripts/setupTypeScriptRollup.js | 137 +++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 scripts/setupTypeScriptRollup.js diff --git a/scripts/setupTypeScriptRollup.js b/scripts/setupTypeScriptRollup.js new file mode 100644 index 00000000..bc8f2f79 --- /dev/null +++ b/scripts/setupTypeScriptRollup.js @@ -0,0 +1,137 @@ +// @ts-check +const fs = require("fs") +const path = require("path") +const { argv } = require("process") + +const projectRoot = argv[2] || path.join(__dirname, "..") + +console.log("Adding typescript with rollup") + +// Add deps to pkg.json +let pkgJSONPath = path.join(projectRoot, "package.json") +const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, "utf8")) +packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { + "svelte-check": "^1.0.0", + "svelte-preprocess": "^4.0.0", + "@rollup/plugin-typescript": "^6.0.0", + "typescript": "^3.9.3", + "tslib": "^2.0.0", + "@tsconfig/svelte": "^1.0.0", + "@types/compression": "^1.7.0", + "@types/node": "^14.0.27", + "@types/polka": "^0.5.1" +}) + +// Add script for checking +packageJSON.scripts = Object.assign(packageJSON.scripts, { + validate: "svelte-check --ignore src/node_modules/@sapper" +}) + +// Write the package JSON +fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, " ")) + +scanFolderAndReplace(path.join(projectRoot, "src")) + +// replace js script tags to ts +// replace js filenames to ts +function scanFolderAndReplace(dir) { + const elements = fs.readdirSync(dir, { withFileTypes: true }) + + for (let i = 0; i < elements.length; i++) { + if (elements[i].isDirectory()) + scanFolderAndReplace(path.join(dir, elements[i].name)) + else if (elements[i].name.match(/.svelte/)) { + let svelteFile = fs.readFileSync(path.join(dir, elements[i].name), "utf8") + svelteFile = svelteFile.replace(" Date: Sun, 13 Sep 2020 00:59:15 +0200 Subject: [PATCH 2/5] - change formatting style to conform to project - add types programmatically to service-worker.ts - add compilerOptions lib for service worker types Signed-off-by: mhatvan --- scripts/setupTypeScriptRollup.js | 182 +++++++++++++++++++++---------- 1 file changed, 124 insertions(+), 58 deletions(-) diff --git a/scripts/setupTypeScriptRollup.js b/scripts/setupTypeScriptRollup.js index bc8f2f79..f8932234 100644 --- a/scripts/setupTypeScriptRollup.js +++ b/scripts/setupTypeScriptRollup.js @@ -1,60 +1,64 @@ // @ts-check -const fs = require("fs") -const path = require("path") -const { argv } = require("process") +const fs = require('fs'); +const path = require('path'); +const { argv } = require('process'); -const projectRoot = argv[2] || path.join(__dirname, "..") +const projectRoot = argv[2] || path.join(__dirname, '..'); -console.log("Adding typescript with rollup") +console.log('Adding typescript with rollup'); // Add deps to pkg.json -let pkgJSONPath = path.join(projectRoot, "package.json") -const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, "utf8")) +const pkgJSONPath = path.join(projectRoot, 'package.json'); +const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8')); packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { - "svelte-check": "^1.0.0", - "svelte-preprocess": "^4.0.0", - "@rollup/plugin-typescript": "^6.0.0", - "typescript": "^3.9.3", - "tslib": "^2.0.0", - "@tsconfig/svelte": "^1.0.0", - "@types/compression": "^1.7.0", - "@types/node": "^14.0.27", - "@types/polka": "^0.5.1" -}) + 'svelte-check': '^1.0.0', + 'svelte-preprocess': '^4.0.0', + '@rollup/plugin-typescript': '^6.0.0', + 'typescript': '^3.9.3', + 'tslib': '^2.0.0', + '@tsconfig/svelte': '^1.0.0', + '@types/compression': '^1.7.0', + '@types/node': '^14.0.27', + '@types/polka': '^0.5.1' +}); // Add script for checking packageJSON.scripts = Object.assign(packageJSON.scripts, { - validate: "svelte-check --ignore src/node_modules/@sapper" -}) + validate: 'svelte-check --ignore src/node_modules/@sapper' +}); // Write the package JSON -fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, " ")) +fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, ' ')); -scanFolderAndReplace(path.join(projectRoot, "src")) +scanFolderAndReplace(path.join(projectRoot, 'src')); // replace js script tags to ts // replace js filenames to ts function scanFolderAndReplace(dir) { - const elements = fs.readdirSync(dir, { withFileTypes: true }) + const elements = fs.readdirSync(dir, { withFileTypes: true }); for (let i = 0; i < elements.length; i++) { - if (elements[i].isDirectory()) - scanFolderAndReplace(path.join(dir, elements[i].name)) - else if (elements[i].name.match(/.svelte/)) { - let svelteFile = fs.readFileSync(path.join(dir, elements[i].name), "utf8") - svelteFile = svelteFile.replace(" { + input.clients.claim(); +}; + +const skipWaiting = (input: ServiceWorkerGlobalScope) => { + input.skipWaiting(); +};` +); + +serviceWorkerConfig = serviceWorkerConfig.replace( + `'install', event =>`, + `'install', (event: EventType) =>` +); + +serviceWorkerConfig = serviceWorkerConfig.replace( + `self.skipWaiting();`, + `skipWaiting((self as any) as ServiceWorkerGlobalScope);` +); + +serviceWorkerConfig = serviceWorkerConfig.replace( + `'activate', event =>`, + `'activate', (event: EventType) =>` +); + +serviceWorkerConfig = serviceWorkerConfig.replace( + `self.clients.claim();`, + `claimClient((self as any) as { clients: Clients });` +); + +serviceWorkerConfig = serviceWorkerConfig.replace( + `'fetch', event =>`, + `'fetch', (event: EventType) =>` +); + +fs.writeFileSync(serviceWorkerConfigPath, serviceWorkerConfig); // Add TypeScript rollupConfig = rollupConfig.replace( /commonjs\(\),?/g, - "commonjs(),\n\t\t\ttypescript({ sourceMap: dev })," -) + 'commonjs(),\n\t\t\ttypescript({ sourceMap: dev }),' +); // Save rollup config -fs.writeFileSync(rollupConfigPath, rollupConfig) +fs.writeFileSync(rollupConfigPath, rollupConfig); // Add TSConfig const tsconfig = `{ "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "lib": ["DOM", "ES2017", "WebWorker"] + }, "include": ["src/**/*", "src/node_modules/**/*"], "exclude": ["node_modules/*", "__sapper__/*", "static/*"] -}` -const tsconfigPath = path.join(projectRoot, "tsconfig.json") -fs.writeFileSync(tsconfigPath, tsconfig) +}`; +const tsconfigPath = path.join(projectRoot, 'tsconfig.json'); +fs.writeFileSync(tsconfigPath, tsconfig); // Delete this script, but not during testing if (!argv[2]) { // Remove the script - fs.unlinkSync(path.join(__filename)) + fs.unlinkSync(path.join(__filename)); // Check for Mac's DS_store file, and if it's the only one left remove it - const remainingFiles = fs.readdirSync(path.join(__dirname)) - if (remainingFiles.length === 1 && remainingFiles[0] === ".DS_store") { - fs.unlinkSync(path.join(__dirname, ".DS_store")) + const remainingFiles = fs.readdirSync(path.join(__dirname)); + if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') { + fs.unlinkSync(path.join(__dirname, '.DS_store')); } // Check if the scripts folder is empty if (fs.readdirSync(path.join(__dirname)).length === 0) { // Remove the scripts folder - fs.rmdirSync(path.join(__dirname)) + fs.rmdirSync(path.join(__dirname)); } } // Adds the extension recommendation -fs.mkdirSync(path.join(projectRoot, ".vscode")) +fs.mkdirSync(path.join(projectRoot, '.vscode')); fs.writeFileSync( - path.join(projectRoot, ".vscode", "extensions.json"), + path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}` -) +); -console.log("Converted to TypeScript.") +console.log('Converted to TypeScript.'); -if (fs.existsSync(path.join(projectRoot, "node_modules"))) { +if (fs.existsSync(path.join(projectRoot, 'node_modules'))) { console.log( - "\nYou will need to re-run your dependency manager to get started." - ) + '\nYou will need to re-run your dependency manager to get started.' + ); } From 3ae45914c332e61ab8502cabb92f96178ca4a5cf Mon Sep 17 00:00:00 2001 From: mhatvan Date: Mon, 21 Sep 2020 21:14:57 +0200 Subject: [PATCH 3/5] - sorted package.json dependencies in setupTypeScriptRollup.js - types added in typescript files to please svelte-check script - silence rollup warning for this until type support - remove unused function parameters in preload methods Signed-off-by: mhatvan --- scripts/setupTypeScriptRollup.js | 93 ++++++++++++++++++++++++++------ src/routes/blog/[slug].svelte | 6 +-- src/routes/blog/index.svelte | 14 ++--- 3 files changed, 88 insertions(+), 25 deletions(-) diff --git a/scripts/setupTypeScriptRollup.js b/scripts/setupTypeScriptRollup.js index f8932234..bef75e69 100644 --- a/scripts/setupTypeScriptRollup.js +++ b/scripts/setupTypeScriptRollup.js @@ -11,15 +11,15 @@ console.log('Adding typescript with rollup'); const pkgJSONPath = path.join(projectRoot, 'package.json'); const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8')); packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { - 'svelte-check': '^1.0.0', - 'svelte-preprocess': '^4.0.0', '@rollup/plugin-typescript': '^6.0.0', - 'typescript': '^3.9.3', - 'tslib': '^2.0.0', '@tsconfig/svelte': '^1.0.0', '@types/compression': '^1.7.0', '@types/node': '^14.0.27', - '@types/polka': '^0.5.1' + '@types/polka': '^0.5.1', + 'svelte-check': '^1.0.0', + 'svelte-preprocess': '^4.0.0', + 'typescript': '^3.9.3', + 'tslib': '^2.0.0' }); // Add script for checking @@ -32,7 +32,6 @@ fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, ' ')); scanFolderAndReplace(path.join(projectRoot, 'src')); -// replace js script tags to ts // replace js filenames to ts function scanFolderAndReplace(dir) { const elements = fs.readdirSync(dir, { withFileTypes: true }); @@ -40,13 +39,6 @@ function scanFolderAndReplace(dir) { for (let i = 0; i < elements.length; i++) { if (elements[i].isDirectory()) { scanFolderAndReplace(path.join(dir, elements[i].name)); - } else if (elements[i].name.match(/.svelte/)) { - let svelteFile = fs.readFileSync( - path.join(dir, elements[i].name), - 'utf8' - ); - svelteFile = svelteFile.replace(' r.json())', + ts: '.then((r: { json: () => any; }) => r.json())' + }, + { + js: '.then(posts => {', + ts: '.then((posts: { slug: string; title: string, html: any }[]) => {' + } + ] + }, + { + view: 'routes/blog/[slug]', + vars: [{ name: 'post', type: '{ slug: string; title: string, html: any }' }] + } +].forEach(({ view, vars, contextModule }) => { + const svelteFilePath = path.join(projectRoot, 'src', `${view}.svelte`); + let file = fs.readFileSync(svelteFilePath, 'utf8'); + + file = file.replace(/(?:/gm, ''); + + if (vars) { + vars.forEach(({ name, type }) => { + file = file.replace( + `export let ${name};`, + `export let ${name}: ${type};` + ); + }); + } + + if (contextModule) { + contextModule.forEach(({ js, ts }) => { + file = file.replace(`${js}`, `${ts}`); + }); + } + + fs.writeFileSync(svelteFilePath, file); +}); + // Edit rollup config const rollupConfigPath = path.join(projectRoot, 'rollup.config.js'); let rollupConfig = fs.readFileSync(rollupConfigPath, 'utf8'); @@ -69,6 +128,10 @@ import typescript from '@rollup/plugin-typescript';` ); // Edit inputs +rollupConfig = rollupConfig.replace( + `onwarn(warning);`, + `(warning.code === 'THIS_IS_UNDEFINED') ||\n\tonwarn(warning);` +); rollupConfig = rollupConfig.replace( `input: config.client.input(),`, `input: config.client.input().replace(/\.js$/, '.ts'),` @@ -197,7 +260,5 @@ fs.writeFileSync( console.log('Converted to TypeScript.'); if (fs.existsSync(path.join(projectRoot, 'node_modules'))) { - console.log( - '\nYou will need to re-run your dependency manager to get started.' - ); + console.log(`\nYou will need to re-run 'npm install' to get started.`); } diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte index 9e0c4192..84e80844 100644 --- a/src/routes/blog/[slug].svelte +++ b/src/routes/blog/[slug].svelte @@ -1,5 +1,5 @@ @@ -29,6 +31,6 @@ tell Sapper to load the data for the page as soon as the user hovers over the link or taps it, instead of waiting for the 'click' event --> -
  • {post.title}
    • +
  • {post.title}
    • {/each} - \ No newline at end of file + From 03d7b15343d85d030610084078d937164d09bbe2 Mon Sep 17 00:00:00 2001 From: mhatvan Date: Mon, 21 Sep 2020 22:38:34 +0200 Subject: [PATCH 4/5] - change index.svelte back to old indentation - correct naming for TypeScript and Rollup - bump typescript to v4 and use latest versions for all deps - get rid of custom methods for serviceWorkerConfig Signed-off-by: mhatvan --- scripts/setupTypeScriptRollup.js | 36 ++++++++------------------------ src/routes/blog/index.svelte | 4 +--- 2 files changed, 10 insertions(+), 30 deletions(-) diff --git a/scripts/setupTypeScriptRollup.js b/scripts/setupTypeScriptRollup.js index bef75e69..73edef1b 100644 --- a/scripts/setupTypeScriptRollup.js +++ b/scripts/setupTypeScriptRollup.js @@ -5,21 +5,21 @@ const { argv } = require('process'); const projectRoot = argv[2] || path.join(__dirname, '..'); -console.log('Adding typescript with rollup'); +console.log('Adding TypeScript with Rollup'); // Add deps to pkg.json const pkgJSONPath = path.join(projectRoot, 'package.json'); const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8')); packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { '@rollup/plugin-typescript': '^6.0.0', - '@tsconfig/svelte': '^1.0.0', + '@tsconfig/svelte': '^1.0.10', '@types/compression': '^1.7.0', - '@types/node': '^14.0.27', + '@types/node': '^14.11.1', '@types/polka': '^0.5.1', - 'svelte-check': '^1.0.0', - 'svelte-preprocess': '^4.0.0', - 'typescript': '^3.9.3', - 'tslib': '^2.0.0' + 'svelte-check': '^1.0.46', + 'svelte-preprocess': '^4.3.0', + 'tslib': '^2.0.1', + 'typescript': '^4.0.3' }); // Add script for checking @@ -161,29 +161,11 @@ const serviceWorkerConfigPath = path.join( let serviceWorkerConfig = fs.readFileSync(serviceWorkerConfigPath, 'utf8'); -serviceWorkerConfig = serviceWorkerConfig.replace( - `'@sapper/service-worker';`, - `'@sapper/service-worker';\n -type Clientable = { clients: Clients };` -); - serviceWorkerConfig = serviceWorkerConfig.replace( `shell.concat(files);`, `(shell as string[]).concat(files as string[]);` ); -serviceWorkerConfig = serviceWorkerConfig.replace( - `const cached = new Set(to_cache);`, - `const cached = new Set(to_cache);\n -const claimClient = (input: Clientable) => { - input.clients.claim(); -}; - -const skipWaiting = (input: ServiceWorkerGlobalScope) => { - input.skipWaiting(); -};` -); - serviceWorkerConfig = serviceWorkerConfig.replace( `'install', event =>`, `'install', (event: EventType) =>` @@ -191,7 +173,7 @@ serviceWorkerConfig = serviceWorkerConfig.replace( serviceWorkerConfig = serviceWorkerConfig.replace( `self.skipWaiting();`, - `skipWaiting((self as any) as ServiceWorkerGlobalScope);` + `((self as any) as ServiceWorkerGlobalScope).skipWaiting();` ); serviceWorkerConfig = serviceWorkerConfig.replace( @@ -201,7 +183,7 @@ serviceWorkerConfig = serviceWorkerConfig.replace( serviceWorkerConfig = serviceWorkerConfig.replace( `self.clients.claim();`, - `claimClient((self as any) as { clients: Clients });` + `((self as any) as ServiceWorkerGlobalScope).clients.claim();` ); serviceWorkerConfig = serviceWorkerConfig.replace( diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte index c22a44cb..d1a377ca 100644 --- a/src/routes/blog/index.svelte +++ b/src/routes/blog/index.svelte @@ -1,8 +1,6 @@