svelte-preprocess - npm Package Compare versions

Comparing version 2.14.4 to 2.15.0

package.json

 {
   "name": "svelte-preprocess",
-  "version": "2.14.4",
+  "version": "2.15.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -5,2 +5,24 @@ # Svelte Preprocess
 
+<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
+<!-- code_chunk_output -->
+
+- [Installation](#installation)
+- [Features](#features)
+  - [Template tag support](#template-tag-support)
+  - [External files support](#external-files-support)
+  - [Global style support](#global-style-support)
+  - [Preprocessors support](#preprocessors-support)
+- [Usage](#usage)
+  - [Auto Preprocessing](#auto-preprocessing)
+  - [Standalone processors](#standalone-processors)
+  - [With `rollup-plugin-svelte`](#with-rollup-plugin-svelte)
+  - [With `svelte-loader`](#with-svelte-loader)
+  - [With Sapper](#with-sapperhttpssappersveltedev)
+  - [With Svelte VS Code](#with-svelte-vs-codehttpsmarketplacevisualstudiocomitemsitemnamejamesbirtlessvelte-vscode)
+- [Limitations](#limitations)
+  - [`typescript`](#typescript)
+  - [`pug`](#pug)
+
+<!-- /code_chunk_output -->
+
 ## Installation
@@ -38,4 +60,2 @@
 
-_Note: only for auto preprocessing_
-
 ```html
@@ -103,6 +123,3 @@ <template src="template.html"></template>
 <style type="text/stylus">
-  $color=red
-
-  div
-    color: $color;
+  $color=reddivcolor: $color;
 </style>
@@ -115,3 +132,3 @@ ```
 
-In auto preprocessing mode, `svelte-preprocess` automatically uses the respective preprocessor for your code based on your `type="..."` or `lang="..."` attributes. It also handles the `<template>` tag for markup, external files and global styling.
+In auto preprocessing mode, `svelte-preprocess` automatically uses the respective preprocessor for your code based on your `type="..."` or `lang="..."` attributes. It also handles the `<template>` tag for markup, external files and global styling. It's as simple as importing the module and executing the default exported method.
 
@@ -215,3 +232,3 @@ #### Basic
 
-### Standalone processors
+### Stand-alone processors
 
@@ -340,9 +357,29 @@ Instead of a single processor, [Svelte v3 has added support for multiple processors](https://svelte.dev/docs#svelte_preprocess). In case you want to manually configure your preprocessing step, `svelte-preprocess` exports these named processors:
 
-### Limitations
+### With [Svelte VS Code](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)
 
-#### `typescript`
+`svelte-vscode` needs to know how its (svelte) language server should preprocess your files. This can be achieved by creating a `svelte.config.js` file at the root of your project which exports a svelte options object (similar to `svelte-loader` and `rollup-plugin-svelte`).
 
+**Example**:
+
+```js
+// svelte.config.js
+const preprocess = require('svelte-preprocess')
+
+module.exports = {
+  preprocess: preprocess({
+    // ...svelte-preprocess options
+  }),
+  // ...other svelte options
+}
+```
+
+_Tip: this file can be imported in your bundle config instead of having multiple svelte configurations lying around._
+
+## Limitations
+
+### `typescript`
+
 Since `typescript` is not officially supported by `svelte` for its template language, `svelte-preprocess` only type checks code in the `<script></script>` tag.
 
-#### `pug`
+### `pug`
 
@@ -349,0 +386,0 @@ Some of Svelte's template syntax is invalid in `pug`. `svelte-preprocess` provides some pug mixins to represent svelte's `{#...}{/...}` blocks: `+if()`, `+else()`, `+elseif()`, `+each()`, `+await()`, `+then()`, `+catch()`, `+debug()`.

src/autoProcess.js

 const stripIndent = require('strip-indent')
 const { version } = require('svelte/package.json')
 const {
+  concat,
   addLanguageAlias,
-  getLanguage,
+  parseFile,
   runTransformer,
   isFn,
-  getSrcContent,
-  resolveSrc,
   throwUnsupportedError,
@@ -25,5 +24,2 @@ } = require('./utils.js')
 
-const concat = (...arrs) =>
-  arrs.reduce((acc, a) => (a && a.length ? acc.concat(a) : acc), [])
-
 module.exports = ({ onBefore, aliases, preserve = [], ...rest } = {}) => {
@@ -55,9 +51,7 @@ const optionsCache = {}
 
-  const getTransformerTo = targetLanguage => async ({
-    content,
-    attributes,
-    filename,
-  }) => {
-    const { lang, alias } = getLanguage(attributes, targetLanguage)
-    const dependencies = []
+  const getTransformerTo = targetLanguage => async svelteFile => {
+    const { content, filename, lang, alias, dependencies } = await parseFile(
+      svelteFile,
+      targetLanguage,
+    )
 
@@ -68,12 +62,2 @@ if (preserve.includes(lang) || preserve.includes(alias)) {
 
-    if (attributes.src) {
-      /** Ignore remote files */
-      if (attributes.src.match(/^(https?)?:?\/\/.*$/)) {
-        return
-      }
-      const file = resolveSrc(filename, attributes.src)
-      content = await getSrcContent(file)
-      dependencies.push(file)
-    }
-
     if (lang === targetLanguage) {
@@ -90,6 +74,3 @@ return { code: content, dependencies }
       getTransformerOptions(lang, alias),
-      {
-        content: stripIndent(content),
-        filename,
-      },
+      { content: stripIndent(content), filename },
     )
@@ -96,0 +77,0 @@

src/processors/coffeescript.js

@@ -1,11 +0,19 @@
-const { getLanguage } = require('../utils.js')
 const transformer = require('../transformers/coffeescript.js')
+const { concat, parseFile } = require('../utils.js')
 
 module.exports = options => ({
-  script({ content, attributes, filename }) {
-    const { lang } = getLanguage(attributes, 'javascript')
+  async script(svelteFile) {
+    const { content, filename, lang, dependencies } = await parseFile(
+      svelteFile,
+      'javascript',
+    )
+
     if (lang !== 'coffeescript') return { code: content }
 
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/processors/less.js

@@ -1,11 +0,19 @@
-const { getLanguage } = require('../utils.js')
 const transformer = require('../transformers/less.js')
+const { concat, parseFile } = require('../utils.js')
 
 module.exports = options => ({
-  style({ content, attributes, filename }) {
-    const { lang } = getLanguage(attributes, 'css')
+  async style(svelteFile) {
+    const { content, filename, lang, dependencies } = await parseFile(
+      svelteFile,
+      'css',
+    )
+
     if (lang !== 'less') return { code: content }
 
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/processors/postcss.js

 const transformer = require('../transformers/postcss.js')
+const { concat, parseFile } = require('../utils.js')
 
 /** Adapted from https://github.com/TehShrike/svelte-preprocess-postcss */
 module.exports = options => ({
-  style({ content, attributes, filename }) {
+  async style(svelteFile) {
+    const { content, filename, dependencies } = await parseFile(
+      svelteFile,
+      'css',
+    )
+
     /** If manually passed a plugins array, use it as the postcss config */
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/processors/scss.js

 const transformer = require('../transformers/scss.js')
-const { getIncludePaths, getLanguage } = require('../utils.js')
+const { getIncludePaths, concat, parseFile } = require('../utils.js')
 
 module.exports = options => ({
-  style({ content, attributes, filename }) {
-    const { lang, alias } = getLanguage(attributes, 'css')
+  async style(svelteFile) {
+    const { content, filename, lang, alias, dependencies } = await parseFile(
+      svelteFile,
+      'css',
+    )
+
     if (lang !== 'scss') return { code: content }
@@ -18,4 +22,8 @@
 
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/processors/stylus.js

 const transformer = require('../transformers/stylus.js')
+const { getIncludePaths, concat, parseFile } = require('../utils.js')
 
-const { getIncludePaths, getLanguage } = require('../utils.js')
-
 module.exports = options => ({
-  style({ content, attributes, filename }) {
-    const { lang } = getLanguage(attributes, 'css')
+  async style(svelteFile) {
+    const { content, filename, lang, dependencies } = await parseFile(
+      svelteFile,
+      'css',
+    )
     if (lang !== 'stylus') return { code: content }
@@ -15,4 +17,8 @@
 
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/processors/typescript.js

@@ -1,11 +0,18 @@
-const { getLanguage } = require('../utils.js')
+const { concat, parseFile } = require('../utils.js')
 const transformer = require('../transformers/typescript.js')
 
 module.exports = options => ({
-  script({ content, attributes, filename }) {
-    const { lang } = getLanguage(attributes, 'javascript')
+  async script(svelteFile) {
+    const { content, filename, lang, dependencies } = await parseFile(
+      svelteFile,
+      'javascript',
+    )
     if (lang !== 'typescript') return { code: content }
 
-    return transformer({ content, filename, options })
+    const transformed = await transformer({ content, filename, options })
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    }
   },
 })

src/utils.js

@@ -18,2 +18,5 @@ const { readFile } = require('fs')
 
+exports.concat = (...arrs) =>
+  arrs.reduce((acc, a) => (a && a.length ? acc.concat(a) : acc), [])
+
 exports.throwUnsupportedError = (lang, filename) =>
@@ -24,6 +27,6 @@ throwError(`Unsupported script language '${lang}' in file '${filename}'`)
 
-exports.resolveSrc = (importerFile, srcPath) =>
-  resolve(dirname(importerFile), srcPath)
+const resolveSrc = (exports.resolveSrc = (importerFile, srcPath) =>
+  resolve(dirname(importerFile), srcPath))
 
-exports.getSrcContent = file => {
+const getSrcContent = (exports.getSrcContent = file => {
   return new Promise((resolve, reject) => {
@@ -36,2 +39,25 @@ readFile(file, (error, data) => {
   })
+})
+
+exports.parseFile = async ({ attributes, filename, content }, language) => {
+  const dependencies = []
+  if (attributes.src) {
+    /** Ignore remote files */
+    if (!attributes.src.match(/^(https?)?:?\/\/.*$/)) {
+      const file = resolveSrc(filename, attributes.src)
+      content = await getSrcContent(file)
+      dependencies.push(file)
+    }
+  }
+
+  const { lang, alias } = exports.getLanguage(attributes, language)
+
+  return {
+    filename,
+    attributes,
+    content,
+    lang,
+    alias,
+    dependencies,
+  }
 }
@@ -82,5 +108,3 @@
     throwError(
-      `Error transforming '${name}'. Message:\n${e.message}\nStack:\n${
-        e.stack
-      }`,
+      `Error transforming '${name}'. Message:\n${e.message}\nStack:\n${e.stack}`,
     )
@@ -87,0 +111,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51177

increased by6.17%

Lines of code

753

increased by6.66%

Number of lines in readme file

391

increased by10.45%

No dependency changes