Initial commit 🐣

Author: kaisermann

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

.eslintignore

@@ -0,0 +1 @@
+/test/fixtures

.eslintrc

@@ -0,0 +1,13 @@
+{
+  "root": true,
+  "extends": ["standard"],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true
+    }
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.log

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,86 @@
+# Svelte Smart Preprocess (WIP)
+
+> A smart svelte preprocessor wrapper
+
+## Usage
+
+```js
+const preprocessOptions = smartPreprocess({
+  [language]: false | true | fn(content,filename): { code, map }
+})
+
+svelte.preprocess(input, preprocessOptions).then(...)
+```
+
+## Features
+
+### Template (a la Vue) tag support
+
+```html
+<template>
+  <div>Hey</div>
+</template>
+
+<style></style>
+
+<script></script>
+```
+
+## External files support
+
+```html
+<template src="template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.css"></style>
+```
+
+## Preprocessors support
+
+Current supported out-of-the-box preprocessors are `SCSS`, `Stylus`, `Less`, `Coffeescript`, `Pug`.
+
+```html
+<div>Hey</div>
+
+<style src="./style.scss"></style>
+
+<style src="./style.styl"></style>
+
+<style lang="scss">
+  $color: red;
+  div {
+    color: $color;
+  }
+</style>
+
+<style type="text/stylus">
+  $color = red
+
+  div
+    color: $color
+</style>
+```
+
+## Example
+
+```js
+  const svelte = require('svelte')
+  const smartPreprocess = require('svelte-smart-preprocess')
+
+  const input = '...'
+
+  const preprocessOptions = smartPreprocess({
+    /** Use included scss compiler */
+    scss: true
+    /**
+     * Pass a function which returns an object { code, map }
+     * or a promise that resolves to one.
+     */
+    pug: function (content, filename, options) {
+      const code = pug.render(content)
+
+      return { code, map: null }
+    }
+  })
+
+  svelte.preprocess(input, preprocessOptions).then(...)
+```

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "svelte-smart-preprocess",
+  "version": "0.1.0",
+  "description": "Smart svelte preprocess wrapper",
+  "main": "src/index.js",
+  "repository": "https://github.com/kaisermann/svelte-smart-preprocess",
+  "author": "Christian Kaisermann <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest --no-cache --verbose"
+  },
+  "devDependencies": {
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "jest": "^22.4.3",
+    "prettier": "^1.12.1",
+    "svelte": "^2.5.1"
+  },
+  "peerDependencies": {
+    "svelte": "^2.5.1"
+  },
+  "optionalDependencies": {
+    "coffeescript": "^2.3.0",
+    "less": "^3.0.4",
+    "node-sass": "^4.9.0",
+    "pug": "^2.0.3",
+    "stylus": "^0.54.5"
+  },
+  "dependencies": {
+    "strip-indent": "^2.0.0"
+  }
+}

src/index.js

@@ -0,0 +1,144 @@
+const { readFileSync } = require('fs')
+const { dirname, resolve } = require('path')
+const stripIndent = require('strip-indent')
+
+const { findPackageJson, getLanguage, runPreprocessor } = require('./utils.js')
+
+const throwError = (msg) => { throw new Error(`[svelte-smart-preprocess] ${msg}`) }
+const throwUnsupportedError = (lang, filename) =>
+  throwError(`Unsupported script language '${lang}' in file '${filename}'`)
+
+module.exports = (languages = {}) => {
+  return {
+    markup: ({content, filename}) => {
+      const templateMatch = content.match(/(<template([\s\S]*?)>([\s\S]*?)<\/template>)/)
+
+      /** If no <template> was found, just return the original markup */
+      if (!templateMatch) {
+        return { code: content }
+      }
+
+      let [, wholeTemplateTag, unparsedAttrs, templateCode] = templateMatch
+
+      /** Transform the <template> attributes into a consumable object */
+      unparsedAttrs = unparsedAttrs.trim()
+      const attributes = unparsedAttrs.length > 0
+        ? unparsedAttrs.split(' ').reduce((acc, entry) => {
+          const [key, value] = entry.split('=')
+          acc[key] = value.replace(/['"]/g, '')
+          return acc
+        }, {})
+        : {}
+
+      const lang = getLanguage(attributes, 'html')
+      const componentDir = dirname(filename)
+
+      /** If src="" is allowed and was defined, let's get the referenced file content */
+      if (attributes.src) {
+        templateCode = readFileSync(resolve(componentDir, attributes.src)).toString()
+      }
+
+      /** If language is HTML, just remove the <template></template> tags */
+      if (lang === 'html') {
+        return {
+          code: content.replace(wholeTemplateTag, templateCode)
+        }
+      }
+
+      if (languages[lang]) {
+        const processedContent = runPreprocessor(lang,
+          languages[lang],
+          stripIndent(templateCode),
+          filename
+        )
+
+        /** It may return a promise, let's check for that */
+        if (Promise.resolve(processedContent) === processedContent) {
+          return processedContent.then(({ code }) => {
+            return {
+              code: content.replace(wholeTemplateTag, code)
+            }
+          })
+        }
+
+        /** Remove the <template> tag with the actual template code */
+        return {
+          code: content.replace(wholeTemplateTag, processedContent.code)
+        }
+      }
+
+      throwUnsupportedError(lang, filename)
+    },
+    script: ({ content = '', attributes, filename }) => {
+      const lang = getLanguage(attributes, 'javascript')
+      const componentDir = dirname(filename)
+
+      /** If src="" is allowed and was defined, let's get the referenced file content */
+      if (attributes.src) {
+        content = readFileSync(resolve(componentDir, attributes.src)).toString()
+      }
+
+      if (lang === 'javascript') {
+        return { code: content }
+      }
+
+      if (languages[lang]) {
+        return runPreprocessor(lang, languages[lang], content, filename)
+      }
+
+      throwUnsupportedError(lang, filename)
+    },
+    style: ({ content = '', attributes, filename }) => {
+      const lang = getLanguage(attributes, 'css')
+      const componentDir = dirname(filename)
+
+      /** If src="" is allowed and was defined, let's get the referenced file content */
+      if (attributes.src) {
+        content = readFileSync(resolve(componentDir, attributes.src)).toString()
+      }
+
+      if (lang === 'css') {
+        return { code: content }
+      }
+
+      /** If the build step is supporting the used language, run it's preprocessor */
+      if (languages[lang]) {
+        return runPreprocessor(lang, languages[lang], content, filename)
+      } else {
+        throwUnsupportedError(lang, filename)
+        /**
+           * If including a uncompiled svelte component which uses a not supported style language,
+           * search for it's package.json to see if there's a valid css file defined with 'svelte.style' or 'style'.
+           * */
+        const { data: pkgData, filename: pkgFilepath } = findPackageJson(
+          componentDir
+        )
+
+        /** Found any package data? Is it a svelte component? */
+        if (pkgData && pkgData.svelte) {
+          const pkgDir = dirname(pkgFilepath)
+          const svelteStyle = pkgData['svelte.style'] || pkgData.style
+
+          /**
+             * If there's a valid style definition, get the defined file's content.
+             *
+             * TODO - This is broken when the css has global styles. Disabled for now.
+             * */
+            if (false && svelteStyle) { // eslint-disable-line
+            // log(
+            //   'info',
+            //   `Using precompiled css (${svelteStyle}) in component "${
+            //     pkgData.name
+            //   }"`
+            // )
+            content = readFileSync(resolve(pkgDir, svelteStyle))
+              .toString()
+              .replace(/\.svelte-\w{4,7}/, '')
+          } else {
+            throwUnsupportedError(lang, filename)
+          }
+        }
+      }
+    }
+  }
+}

src/langs/coffeescript.js

@@ -0,0 +1,11 @@
+const coffeescript = require('coffeescript')
+
+module.exports = function (content, filename, opts) {
+  const { js: code, sourceMap: map } = coffeescript.compile(content, {
+    filename,
+    sourceMap: true,
+    ...opts
+  })
+
+  return { code, map }
+}

src/langs/less.js

@@ -0,0 +1,6 @@
+const less = require('less/lib/less-node')
+
+module.exports = function (content, filename, opts) {
+  return less.render(content, { sourceMap: {}, ...opts })
+    .then(output => ({ code: output.css, map: output.map }))
+}

src/langs/pug.js

@@ -0,0 +1,7 @@
+const pug = require('pug')
+
+module.exports = function (content, filename, opts) {
+  const code = pug.render(content, opts)
+
+  return { code }
+}

src/langs/scss.js

@@ -0,0 +1,24 @@
+const sass = require('node-sass')
+
+module.exports = function (content, filename, opts = {
+  includePaths: ['node_modules']
+}) {
+  return new Promise((resolve, reject) => {
+    sass.render(
+      {
+        data: content,
+        sourceMap: true,
+        outFile: filename + '.css',
+        ...opts
+      },
+      (err, result) => {
+        if (err) return reject(err)
+
+        resolve({
+          code: result.css.toString(),
+          map: result.map.toString()
+        })
+      }
+    )
+  })
+}

src/langs/stylus.js

@@ -0,0 +1,21 @@
+const stylus = require('stylus')
+
+module.exports = function (content, filename, opts = {
+  paths: ['node_modules']
+}) {
+  return new Promise((resolve, reject) => {
+    const style = stylus(content, {
+      filename,
+      sourcemap: true,
+      ...opts
+    })
+    style.render((err, css) => {
+      if (err) reject(err)
+
+      resolve({
+        code: css,
+        map: style.sourcemap
+      })
+    })
+  })
+}