├── .envrc
├── .gitignore
├── test-components
    ├── ScriptSetup.vue
    ├── EmptyTemplate.vue
    ├── NoScript.vue
    ├── NoTemplate.vue
    ├── NoStyle.vue
    ├── Vanilla.vue
    ├── DifferentOrderBlocks.vue
    ├── LeadingNewlines.vue
    ├── AttributesOnBlocks.vue
    ├── CustomIndents.vue
    ├── ExtraNewlinesBetweenBlocks.vue
    ├── MultipleStyles.vue
    └── CustomBlocks.vue
├── CHANGELOG.md
├── package.json
├── flake.nix
├── LICENSE.mit
├── flake.lock
├── README.md
├── index.js
├── test.js
└── __snapshots__
    └── test.js.snap


/.envrc:
--------------------------------------------------------------------------------
1 | use flake .
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | # nix
4 | .direnv
5 | 


--------------------------------------------------------------------------------
/test-components/ScriptSetup.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/test-components/EmptyTemplate.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template />


--------------------------------------------------------------------------------
/test-components/NoScript.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="widget">Hello {{name}}</div>
 3 | </template>
 4 | 
 5 | <style>
 6 | .widget {
 7 |   color: red;
 8 | }
 9 | </style>
10 | 


--------------------------------------------------------------------------------
/test-components/NoTemplate.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <style>
12 | .widget {
13 |   color: red;
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/test-components/NoStyle.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template>
12 |   <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/test-components/Vanilla.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template>
12 |   <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 
15 | <style>
16 | .widget {
17 |   color: red;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/test-components/DifferentOrderBlocks.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="widget">Hello {{name}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     name: {
 9 |       type: String
10 |     }
11 |   }
12 | };
13 | </script>
14 | 
15 | <style>
16 | .widget {
17 |   color: red;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/test-components/LeadingNewlines.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | <script>
 5 | export default {
 6 |   props: {
 7 |     name: {
 8 |       type: String
 9 |     }
10 |   }
11 | };
12 | </script>
13 | 
14 | <template>
15 |   <div class="widget">Hello {{name}}</div>
16 | </template>
17 | 
18 | <style>
19 | .widget {
20 |   color: red;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/test-components/AttributesOnBlocks.vue:
--------------------------------------------------------------------------------
 1 | <script lang="js">
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template lang="html">
12 |   <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 
15 | <style scoped lang="css">
16 | .widget {
17 |   color: red;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/test-components/CustomIndents.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template>
12 | <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 
15 | <style>
16 | .widget {
17 |   color: red;
18 | }
19 | </style>
20 | 
21 | <custom1>
22 | hello 1
23 | </custom1>
24 | 


--------------------------------------------------------------------------------
/test-components/ExtraNewlinesBetweenBlocks.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | 
12 | 
13 | <template>
14 |   <div class="widget">Hello {{name}}</div>
15 | </template>
16 | 
17 | 
18 | 
19 | 
20 | 
21 | <style>
22 | .widget {
23 |   color: red;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/test-components/MultipleStyles.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template>
12 |   <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 
15 | <style>
16 | .one {
17 |   color: red;
18 | }
19 | </style>
20 | 
21 | <style>
22 | .two {
23 |   color: blue;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/test-components/CustomBlocks.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     name: {
 5 |       type: String
 6 |     }
 7 |   }
 8 | };
 9 | </script>
10 | 
11 | <template>
12 |   <div class="widget">Hello {{name}}</div>
13 | </template>
14 | 
15 | <style>
16 | .widget {
17 |   color: red;
18 | }
19 | </style>
20 | 
21 | <custom1>
22 | hello 1
23 | </custom1>
24 | 
25 | <custom2>
26 | hello 2
27 | </custom2>
28 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file.
 4 | 
 5 | ## [3.0.1] - 2024-04-11
 6 | 
 7 | ### Fixed
 8 | 
 9 | - Don't mutation options object.
10 | - Fix inaccuracy in docs ([#3](https://github.com/psalaets/vue-sfc-descriptor-to-string/issues/3)).
11 | 
12 | ## [3.0.0] - 2024-04-11
13 | 
14 | ### Breaking
15 | 
16 | - Attributes are no longer sorted.
17 | 
18 | ## [2.0.0] - 2023-06-02
19 | 
20 | ### Added
21 | 
22 | - Vue 3 and esm support. Thanks to [@dword-design](https://github.com/dword-design).
23 | 
24 | ## [1.0.0] - 2018-02-18
25 | 
26 | ### Added
27 | 
28 | - Initial impl
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-sfc-descriptor-to-string",
 3 |   "version": "3.0.1",
 4 |   "description": "Convert SFCDescriptor to source",
 5 |   "main": "index.js",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
 9 |     "ship": "np"
10 |   },
11 |   "homepage": "https://github.com/psalaets/vue-sfc-descriptor-to-string",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/psalaets/vue-sfc-descriptor-to-string.git"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "sfc",
19 |     "parse",
20 |     "stringify"
21 |   ],
22 |   "author": "Paul Salaets <psalaets@gmail.com>",
23 |   "license": "MIT",
24 |   "devDependencies": {
25 |     "@vue/compiler-sfc": "^3.3.4",
26 |     "jest": "^29.5.0",
27 |     "np": "^8.0.2"
28 |   },
29 |   "dependencies": {
30 |     "indent-string": "^5.0.0"
31 |   },
32 |   "engines": {
33 |     "node": ">=12.17.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/flake.nix:
--------------------------------------------------------------------------------
 1 | {
 2 |   inputs = {
 3 |     nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
 4 |     systems.url = "github:nix-systems/default";
 5 |   };
 6 | 
 7 |   outputs = {
 8 |     systems,
 9 |     nixpkgs,
10 |     ...
11 |   } @ inputs: let
12 |     eachSystem = f:
13 |       nixpkgs.lib.genAttrs (import systems) (
14 |         system:
15 |           f nixpkgs.legacyPackages.${system}
16 |       );
17 |   in {
18 |     devShells = eachSystem (pkgs: {
19 |       default = pkgs.mkShell {
20 |         buildInputs = [
21 |           pkgs.nodejs_20
22 |           # You can set the major version of Node.js to a specific one instead
23 |           # of the default version
24 |           # pkgs.nodejs-19_x
25 | 
26 |           # You can choose pnpm, yarn, or none (npm).
27 |           # pkgs.nodePackages.pnpm
28 |           # pkgs.yarn
29 | 
30 |           # pkgs.nodePackages.typescript
31 |           # pkgs.nodePackages.typescript-language-server
32 |         ];
33 |       };
34 |     });
35 |   };
36 | }


--------------------------------------------------------------------------------
/LICENSE.mit:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Paul Salaets
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/flake.lock:
--------------------------------------------------------------------------------
 1 | {
 2 |   "nodes": {
 3 |     "nixpkgs": {
 4 |       "locked": {
 5 |         "lastModified": 1712757991,
 6 |         "narHash": "sha256-kR7C7Fqt3JP40h0mzmSZeWI5pk1iwqj4CSeGjnUbVHc=",
 7 |         "owner": "NixOS",
 8 |         "repo": "nixpkgs",
 9 |         "rev": "d6b3ddd253c578a7ab98f8011e59990f21dc3932",
10 |         "type": "github"
11 |       },
12 |       "original": {
13 |         "owner": "NixOS",
14 |         "ref": "nixpkgs-unstable",
15 |         "repo": "nixpkgs",
16 |         "type": "github"
17 |       }
18 |     },
19 |     "root": {
20 |       "inputs": {
21 |         "nixpkgs": "nixpkgs",
22 |         "systems": "systems"
23 |       }
24 |     },
25 |     "systems": {
26 |       "locked": {
27 |         "lastModified": 1681028828,
28 |         "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
29 |         "owner": "nix-systems",
30 |         "repo": "default",
31 |         "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
32 |         "type": "github"
33 |       },
34 |       "original": {
35 |         "owner": "nix-systems",
36 |         "repo": "default",
37 |         "type": "github"
38 |       }
39 |     }
40 |   },
41 |   "root": "root",
42 |   "version": 7
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-sfc-descriptor-to-string
 2 | 
 3 | Convert SFCDescriptor to source
 4 | 
 5 | ## Install
 6 | 
 7 | `npm install vue-sfc-descriptor-to-string`
 8 | 
 9 | ## Usage
10 | 
11 | ```js
12 | // parse an sfc
13 | const compiler = require('vue-template-compiler');
14 | const sfcDescriptor = compiler.parseComponent(sfcSource);
15 | 
16 | // convert sfc descriptor back to source
17 | const toString = require('vue-sfc-descriptor-to-string');
18 | const result = toString(sfcDescriptor);
19 | 
20 | result == sfcSource // => true, but see caveats below
21 | ```
22 | 
23 | ## API
24 | 
25 | ```js
26 | const toString = require('vue-sfc-descriptor-to-string');
27 | ```
28 | 
29 | ### `toString(SFCDescriptor, options)`
30 | 
31 | #### SFCDescriptor
32 | 
33 | Object that looks like an [SFCDescriptor](https://github.com/vuejs/vue/blob/dev/flow/compiler.js#L177)
34 | 
35 | #### options
36 | 
37 | Optional object, defaults to `{}`
38 | 
39 | ##### options.indents
40 | 
41 | Optional object that can have a property for each sfc block name (e.g. `template`). Values are the number of spaces to indent that block's content.
42 | 
43 | Defaults to
44 | 
45 | ```js
46 | {
47 |   template: 0,
48 |   script: 0,
49 |   style: 0
50 | }
51 | ```
52 | 
53 | ## Caveats
54 | 
55 | This module isn't a true inverse of `compiler.parseComponent()` because it doesn't always produce the exact same sfc compared to what was parsed. It assumes the parsed sfc
56 | 
57 | - ends with a single newline
58 | - has a single space before each attribute on `<script>`, `<template>`, `<style>`
59 | - other stuff
60 | 
61 | ## License
62 | 
63 | MIT


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import indentString from 'indent-string';
 2 | 
 3 | export default function toString(sfcDescriptor, options = {}) {
 4 |   const {
 5 |     template,
 6 |     script,
 7 |     scriptSetup,
 8 |     styles,
 9 |     customBlocks
10 |   } = sfcDescriptor;
11 | 
12 |   const defaultIndent = 0;
13 |   const indents = options.indents || {};
14 | 
15 |   return [template, script, scriptSetup, ...styles, ...customBlocks]
16 |     // discard blocks that don't exist
17 |     .filter(block => block != null)
18 |     // sort blocks by source position
19 |     .sort((a, b) => a.loc.start.offset - b.loc.start.offset)
20 |     // figure out exact source positions of blocks
21 |     .map(block => {
22 |       const openTag = makeOpenTag(block);
23 |       const closeTag = makeCloseTag(block);
24 |       const isSelfClosing = block.ast?.isSelfClosing;
25 | 
26 |       return Object.assign({}, block, {
27 |         openTag,
28 |         closeTag,
29 |         isSelfClosing,
30 | 
31 |         ...isSelfClosing
32 |           ? {
33 |             startOfOpenTag: block.ast.loc.start.offset,
34 |             endOfOpenTag: block.ast.loc.end.offset,
35 | 
36 |             startOfCloseTag: block.ast.loc.start.offset,
37 |             endOfCloseTag: block.ast.loc.end.offset,
38 |           }
39 |           : {
40 |             startOfOpenTag: block.loc.start.offset - openTag.length,
41 |             endOfOpenTag: block.loc.start.offset,
42 | 
43 |             startOfCloseTag: block.loc.end.offset,
44 |             endOfCloseTag: block.loc.end.offset + closeTag.length,
45 |           }
46 |       });
47 |     })
48 |     // generate sfc source
49 |     .reduce((sfcCode, block, index, array) => {
50 |       const first = index === 0;
51 | 
52 |       let newlinesBefore = 0;
53 | 
54 |       if (first) {
55 |         newlinesBefore = block.startOfOpenTag;
56 |       } else {
57 |         const prevBlock = array[index - 1];
58 |         newlinesBefore = block.startOfOpenTag - prevBlock.endOfCloseTag;
59 |       }
60 | 
61 |       return sfcCode
62 |         + '\n'.repeat(newlinesBefore)
63 |         + (block.isSelfClosing
64 |           ? `${block.ast.loc.source}\n`
65 |           : block.openTag
66 |             + indentString(block.content, indents[block.type] || defaultIndent)
67 |             + block.closeTag
68 |         );
69 |     }, '');
70 | }
71 | 
72 | function makeOpenTag(block) {
73 |   let source = '<' + block.type;
74 | 
75 |   source += Object.keys(block.attrs)
76 |     .map(name => {
77 |       const value = block.attrs[name];
78 | 
79 |       if (value === true) {
80 |         return name;
81 |       } else {
82 |         return `${name}="${value}"`;
83 |       }
84 |     })
85 |     .map(attr => ' ' + attr)
86 |     .join('');
87 | 
88 |   return source + '>';
89 | }
90 | 
91 | function makeCloseTag(block) {
92 |   return `</${block.type}>\n`
93 | }


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
  1 | import fs from 'fs';
  2 | import compiler from '@vue/compiler-sfc';
  3 | 
  4 | import toString from './index';
  5 | 
  6 | it('is inverse of `compiler.parseComponent()`', () => {
  7 |   const source = fs.readFileSync('./test-components/Vanilla.vue', 'utf8');
  8 |   const descriptor = compiler.parse(source).descriptor;
  9 | 
 10 |   const result = toString(descriptor);
 11 | 
 12 |   expect(result).toBe(source)
 13 | });
 14 | 
 15 | it('vanilla sfc', async () => {
 16 |   const descriptor = await parse('./test-components/Vanilla.vue');
 17 | 
 18 |   const result = toString(descriptor);
 19 | 
 20 |   expect(result).toMatchSnapshot();
 21 | });
 22 | 
 23 | it('script setup', async () => {
 24 |   const descriptor = await parse('./test-components/ScriptSetup.vue');
 25 | 
 26 |   const result = toString(descriptor);
 27 | 
 28 |   expect(result).toMatchSnapshot();
 29 | });
 30 | 
 31 | it('empty template', async () => {
 32 |   const descriptor = await parse('./test-components/EmptyTemplate.vue');
 33 | 
 34 |   const result = toString(descriptor);
 35 | 
 36 |   expect(result).toMatchSnapshot();
 37 | });
 38 | 
 39 | it('different order blocks', async () => {
 40 |   const descriptor = await parse('./test-components/DifferentOrderBlocks.vue');
 41 | 
 42 |   const result = toString(descriptor);
 43 | 
 44 |   expect(result).toMatchSnapshot();
 45 | });
 46 | 
 47 | it('leading newlines', async () => {
 48 |   const descriptor = await parse('./test-components/LeadingNewlines.vue');
 49 | 
 50 |   const result = toString(descriptor);
 51 | 
 52 |   expect(result).toMatchSnapshot();
 53 | });
 54 | 
 55 | it('no script', async () => {
 56 |   const descriptor = await parse('./test-components/NoScript.vue');
 57 | 
 58 |   const result = toString(descriptor);
 59 | 
 60 |   expect(result).toMatchSnapshot();
 61 | });
 62 | 
 63 | it('no template', async () => {
 64 |   const descriptor = await parse('./test-components/NoTemplate.vue');
 65 | 
 66 |   const result = toString(descriptor);
 67 | 
 68 |   expect(result).toMatchSnapshot();
 69 | });
 70 | 
 71 | it('no style', async () => {
 72 |   const descriptor = await parse('./test-components/NoStyle.vue');
 73 | 
 74 |   const result = toString(descriptor);
 75 | 
 76 |   expect(result).toMatchSnapshot();
 77 | });
 78 | 
 79 | it('multiple styles', async () => {
 80 |   const descriptor = await parse('./test-components/MultipleStyles.vue');
 81 | 
 82 |   const result = toString(descriptor);
 83 | 
 84 |   expect(result).toMatchSnapshot();
 85 | });
 86 | 
 87 | it('attributes on blocks', async () => {
 88 |   const descriptor = await parse('./test-components/AttributesOnBlocks.vue');
 89 | 
 90 |   const result = toString(descriptor);
 91 | 
 92 |   expect(result).toMatchSnapshot();
 93 | });
 94 | 
 95 | it('custom blocks', async () => {
 96 |   const descriptor = await parse('./test-components/CustomBlocks.vue');
 97 | 
 98 |   const result = toString(descriptor);
 99 | 
100 |   expect(result).toMatchSnapshot();
101 | });
102 | 
103 | it('extra newlines between blocks', async () => {
104 |   const descriptor = await parse('./test-components/ExtraNewlinesBetweenBlocks.vue');
105 | 
106 |   const result = toString(descriptor);
107 | 
108 |   expect(result).toMatchSnapshot();
109 | });
110 | 
111 | it('accepts custom indent amounts for every block', async () => {
112 |   const descriptor = await parse('./test-components/CustomIndents.vue');
113 | 
114 |   const result = toString(descriptor, {
115 |     indents: {
116 |       template: 4,
117 |       script: 2,
118 |       style: 1,
119 |       custom1: 10
120 |     }
121 |   });
122 | 
123 |   expect(result).toMatchSnapshot();
124 | });
125 | 
126 | // helpers
127 | function parse(pathToComponent) {
128 |   return new Promise((resolve, reject) => {
129 |     fs.readFile(pathToComponent, 'utf8', (err, sfc) => {
130 |       if (err) return reject(err);
131 | 
132 |       try {
133 |         const descriptor = compiler.parse(sfc).descriptor;
134 |         return resolve(descriptor);
135 |       } catch (e) {
136 |         return reject(e);
137 |       }
138 |     })
139 |   });
140 | }


--------------------------------------------------------------------------------
/__snapshots__/test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`accepts custom indent amounts for every block 1`] = `
  4 | "<script>
  5 |   export default {
  6 |     props: {
  7 |       name: {
  8 |         type: String
  9 |       }
 10 |     }
 11 |   };
 12 | </script>
 13 | 
 14 | <template>
 15 |     <div class="widget">Hello {{name}}</div>
 16 | </template>
 17 | 
 18 | <style>
 19 |  .widget {
 20 |    color: red;
 21 |  }
 22 | </style>
 23 | 
 24 | <custom1>
 25 |           hello 1
 26 | </custom1>
 27 | "
 28 | `;
 29 | 
 30 | exports[`attributes on blocks 1`] = `
 31 | "<script lang="js">
 32 | export default {
 33 |   props: {
 34 |     name: {
 35 |       type: String
 36 |     }
 37 |   }
 38 | };
 39 | </script>
 40 | 
 41 | <template lang="html">
 42 |   <div class="widget">Hello {{name}}</div>
 43 | </template>
 44 | 
 45 | <style scoped lang="css">
 46 | .widget {
 47 |   color: red;
 48 | }
 49 | </style>
 50 | "
 51 | `;
 52 | 
 53 | exports[`custom blocks 1`] = `
 54 | "<script>
 55 | export default {
 56 |   props: {
 57 |     name: {
 58 |       type: String
 59 |     }
 60 |   }
 61 | };
 62 | </script>
 63 | 
 64 | <template>
 65 |   <div class="widget">Hello {{name}}</div>
 66 | </template>
 67 | 
 68 | <style>
 69 | .widget {
 70 |   color: red;
 71 | }
 72 | </style>
 73 | 
 74 | <custom1>
 75 | hello 1
 76 | </custom1>
 77 | 
 78 | <custom2>
 79 | hello 2
 80 | </custom2>
 81 | "
 82 | `;
 83 | 
 84 | exports[`different order blocks 1`] = `
 85 | "<template>
 86 |   <div class="widget">Hello {{name}}</div>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   props: {
 92 |     name: {
 93 |       type: String
 94 |     }
 95 |   }
 96 | };
 97 | </script>
 98 | 
 99 | <style>
100 | .widget {
101 |   color: red;
102 | }
103 | </style>
104 | "
105 | `;
106 | 
107 | exports[`empty template 1`] = `
108 | "<script>
109 | export default {
110 |   props: {
111 |     name: {
112 |       type: String
113 |     }
114 |   }
115 | };
116 | </script>
117 | 
118 | <template />
119 | "
120 | `;
121 | 
122 | exports[`extra newlines between blocks 1`] = `
123 | "<script>
124 | export default {
125 |   props: {
126 |     name: {
127 |       type: String
128 |     }
129 |   }
130 | };
131 | </script>
132 | 
133 | 
134 | 
135 | <template>
136 |   <div class="widget">Hello {{name}}</div>
137 | </template>
138 | 
139 | 
140 | 
141 | 
142 | 
143 | <style>
144 | .widget {
145 |   color: red;
146 | }
147 | </style>
148 | "
149 | `;
150 | 
151 | exports[`leading newlines 1`] = `
152 | "
153 | 
154 | 
155 | <script>
156 | export default {
157 |   props: {
158 |     name: {
159 |       type: String
160 |     }
161 |   }
162 | };
163 | </script>
164 | 
165 | <template>
166 |   <div class="widget">Hello {{name}}</div>
167 | </template>
168 | 
169 | <style>
170 | .widget {
171 |   color: red;
172 | }
173 | </style>
174 | "
175 | `;
176 | 
177 | exports[`multiple styles 1`] = `
178 | "<script>
179 | export default {
180 |   props: {
181 |     name: {
182 |       type: String
183 |     }
184 |   }
185 | };
186 | </script>
187 | 
188 | <template>
189 |   <div class="widget">Hello {{name}}</div>
190 | </template>
191 | 
192 | <style>
193 | .one {
194 |   color: red;
195 | }
196 | </style>
197 | 
198 | <style>
199 | .two {
200 |   color: blue;
201 | }
202 | </style>
203 | "
204 | `;
205 | 
206 | exports[`no script 1`] = `
207 | "<template>
208 |   <div class="widget">Hello {{name}}</div>
209 | </template>
210 | 
211 | <style>
212 | .widget {
213 |   color: red;
214 | }
215 | </style>
216 | "
217 | `;
218 | 
219 | exports[`no style 1`] = `
220 | "<script>
221 | export default {
222 |   props: {
223 |     name: {
224 |       type: String
225 |     }
226 |   }
227 | };
228 | </script>
229 | 
230 | <template>
231 |   <div class="widget">Hello {{name}}</div>
232 | </template>
233 | "
234 | `;
235 | 
236 | exports[`no template 1`] = `
237 | "<script>
238 | export default {
239 |   props: {
240 |     name: {
241 |       type: String
242 |     }
243 |   }
244 | };
245 | </script>
246 | 
247 | <style>
248 | .widget {
249 |   color: red;
250 | }
251 | </style>
252 | "
253 | `;
254 | 
255 | exports[`script setup 1`] = `
256 | "<script setup>
257 | export default {
258 |   props: {
259 |     name: {
260 |       type: String
261 |     }
262 |   }
263 | };
264 | </script>
265 | "
266 | `;
267 | 
268 | exports[`vanilla sfc 1`] = `
269 | "<script>
270 | export default {
271 |   props: {
272 |     name: {
273 |       type: String
274 |     }
275 |   }
276 | };
277 | </script>
278 | 
279 | <template>
280 |   <div class="widget">Hello {{name}}</div>
281 | </template>
282 | 
283 | <style>
284 | .widget {
285 |   color: red;
286 | }
287 | </style>
288 | "
289 | `;
290 | 


--------------------------------------------------------------------------------