setupin 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +2 -0
  2. package/README.zh-CN.md +1 -0
  3. package/dist/main.js +66 -82
  4. package/dist/main.prod.js +118 -113
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -101,10 +101,12 @@ unit as one
101
101
  ```
102
102
 
103
103
  It's exactly the same as [\<script setup>](https://vuejs.org/api/sfc-script-setup.html) except for the \<head>
104
+
104
105
  ## 🤓 Characteristics
105
106
 
106
107
  - [x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)
107
108
  - [x] [sfc css features](https://vuejs.org/api/sfc-css-features.html)
109
+ - [x] [Options API](https://vuejs.org/guide/introduction.html#options-api)
108
110
  - [ ] Split [component](https://vuejs.org/guide/essentials/component-basics.html)
109
111
 
110
112
  ## 🤔 Why setupin
package/README.zh-CN.md CHANGED
@@ -106,6 +106,7 @@
106
106
 
107
107
  - [x] [顶层 await](https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await)
108
108
  - [x] [CSS 功能](https://cn.vuejs.org/api/sfc-css-features)
109
+ - [x] [选项式](https://cn.vuejs.org/guide/introduction.html#options-api)
109
110
  - [ ] 拆分 [组件](https://cn.vuejs.org/guide/essentials/component-basics.html)
110
111
 
111
112
  ## 🤔 为什么选择 setupin
package/dist/main.js CHANGED
@@ -51,26 +51,29 @@ var __async = (__this, __arguments, generator) => {
51
51
  };
52
52
  (function() {
53
53
  "use strict";
54
- const ASCII_LOGO = "\r\n/***************************************\r\n** _ _ **\r\n** ___ ___| |_ _ _ _ __ (_)_ __ **\r\n** / __|/ _ \\ __| | | | '_ \\| | '_ \\ **\r\n** \\__ \\ __/ |_| |_| | |_/ | | | | | **\r\n** |___/\\___|\\__|\\__,_| .__/|_|_| |_| **\r\n** |_| **\r\n***************************************/\r\n";
54
+ const ASCII_LOGO = "/***************************************\r\n** _ _ **\r\n** ___ ___| |_ _ _ _ __ (_)_ __ **\r\n** / __|/ _ \\ __| | | | '_ \\| | '_ \\ **\r\n** \\__ \\ __/ |_| |_| | |_/ | | | | | **\r\n** |___/\\___|\\__|\\__,_| .__/|_|_| |_| **\r\n** |_| **\r\n***************************************/";
55
55
  const APP_VAR_NAME = "APP$";
56
56
  const REPO_NAME = "setupin";
57
- const IMPORTS_JSON = JSON.stringify({ imports: { vue: "https://unpkg.com/vue@latest/dist/vue.runtime.esm-browser.js" } });
57
+ const IMPORTS_TAG_CODE = `
58
+ <script ${REPO_NAME} type="importmap">
59
+ ${JSON.stringify({ imports: { vue: "https://unpkg.com/vue@latest/dist/vue.runtime.esm-browser.js" } })}
60
+ <\/script>
61
+ `;
58
62
  const INIT_CODE = `
59
- ${ASCII_LOGO}
60
- import * as Vue from "vue";
61
- let ${APP_VAR_NAME} = Object.create(null);
63
+ let ${APP_VAR_NAME} = {}
62
64
  `;
63
65
  const CREATE_APP_CODE = `
64
- Vue.createApp(Vue.defineComponent(
66
+ import { createApp as _createApp, defineComponent as _defineComponent, h as _h, Suspense as _Suspense } from 'vue'
67
+ _createApp(_defineComponent(
65
68
  String(${APP_VAR_NAME}.setup).startsWith('async')
66
- ? () => () =>
67
- Vue.h(Vue.Suspense, null, {
68
- default: Vue.h(${APP_VAR_NAME}),
69
- fallback: Vue.h('div', 'Loading...'),
70
- })
69
+ ? () => () => _h(_Suspense, null, {
70
+ default: _h(${APP_VAR_NAME}),
71
+ fallback: _h('div', 'Loading...'),
72
+ })
71
73
  : ${APP_VAR_NAME}
72
74
  )).mount(document.body)
73
75
  `;
76
+ const SCOPED_ID_CODE = `${APP_VAR_NAME}.__scopeId = "data-v-${REPO_NAME}"`;
74
77
  /**
75
78
  * @vue/compiler-sfc v3.5.12
76
79
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
@@ -45871,57 +45874,53 @@ ${exposeCall}`
45871
45874
  };
45872
45875
  __spreadValues2(__spreadValues2({}, errorMessages$1), DOMErrorMessages);
45873
45876
  libExports.parse;
45874
- function compilerSfc(source) {
45875
- var _a2, _b2;
45876
- const id2 = REPO_NAME;
45877
- const filename = `${REPO_NAME}.vue`;
45878
- const sfcParseResult = parse$2(source, { filename });
45879
- sfcParseResult.errors.forEach((e) => {
45880
- console.warn(e);
45881
- });
45882
- const sfcStyleCompileResultsList = sfcParseResult.descriptor.styles.map((style) => {
45883
- const sfcStyleCompileResults = compileStyle({
45884
- id: id2,
45885
- filename,
45877
+ function appCompiler(descriptor, info) {
45878
+ const sfcAppBlock = compileScript(descriptor, __spreadProps(__spreadValues({}, info), {
45879
+ isProd: false
45880
+ }));
45881
+ sfcAppBlock.isScoped = descriptor.styles.some((s) => s.scoped);
45882
+ return sfcAppBlock;
45883
+ }
45884
+ function stylesCompiler(styles, info) {
45885
+ return styles.map((style) => {
45886
+ const sfcStyleCompileResults = compileStyle(__spreadProps(__spreadValues({}, info), {
45886
45887
  source: style.content,
45887
45888
  scoped: style.scoped,
45888
45889
  isProd: false
45889
- });
45890
- sfcStyleCompileResults.errors.forEach((e) => {
45891
- console.warn(e);
45892
- });
45890
+ }));
45891
+ sfcStyleCompileResults.errors.forEach((e) => console.warn(e));
45893
45892
  return sfcStyleCompileResults;
45894
45893
  });
45895
- const sfcAppBlock = compileScript(sfcParseResult.descriptor, {
45896
- id: id2,
45897
- isProd: false
45898
- });
45899
- sfcAppBlock.isScoped = sfcParseResult.descriptor.styles.some((s) => s.scoped);
45900
- const sfcTemplateCompileResults = compileTemplate({
45901
- id: id2,
45902
- filename,
45903
- source: (_b2 = (_a2 = sfcParseResult.descriptor.template) == null ? void 0 : _a2.content) != null ? _b2 : "",
45894
+ }
45895
+ function templateCompiler(template, info) {
45896
+ var _a2;
45897
+ const sfcTemplateCompileResults = compileTemplate(__spreadProps(__spreadValues({}, info), {
45898
+ source: (_a2 = template == null ? void 0 : template.content) != null ? _a2 : "",
45904
45899
  isProd: false
45905
- });
45906
- sfcTemplateCompileResults.errors.forEach((e) => {
45907
- console.warn(e);
45908
- });
45900
+ }));
45901
+ sfcTemplateCompileResults.errors.forEach((e) => console.warn(e));
45902
+ return sfcTemplateCompileResults;
45903
+ }
45904
+ function compilerSfc(source) {
45905
+ const info = { id: REPO_NAME, filename: `${REPO_NAME}.vue` };
45906
+ const { descriptor, errors: errors2 } = parse$2(source, info);
45907
+ errors2.forEach((e) => console.warn(e));
45909
45908
  return {
45910
- sfcStyleCompileResultsList,
45911
- sfcAppBlock,
45912
- sfcTemplateCompileResults
45909
+ sfcStyleCompileResultsList: stylesCompiler(descriptor.styles, info),
45910
+ sfcAppBlock: appCompiler(descriptor, info),
45911
+ sfcTemplateCompileResults: templateCompiler(descriptor.template, info)
45913
45912
  };
45914
45913
  }
45915
45914
  function createDom(row, inner) {
45916
45915
  var _a2;
45917
- const container2 = document.createElement("body");
45916
+ const container2 = document.createElement("main");
45918
45917
  container2.insertAdjacentHTML("afterbegin", row);
45919
45918
  const sample = container2.firstElementChild;
45919
+ if (!sample) return;
45920
45920
  const dom = document.createElement(sample.tagName);
45921
45921
  dom.innerHTML = inner != null ? inner : sample.innerHTML;
45922
- for (const n2 of sample.getAttributeNames()) {
45922
+ for (const n2 of sample.getAttributeNames())
45923
45923
  dom.setAttribute(n2, (_a2 = sample.getAttribute(n2)) != null ? _a2 : "");
45924
- }
45925
45924
  return {
45926
45925
  mount: (el) => el.appendChild(dom)
45927
45926
  };
@@ -45930,15 +45929,10 @@ ${exposeCall}`
45930
45929
  const carrier = [];
45931
45930
  return new Promise((resolve2) => {
45932
45931
  const observer = new MutationObserver((mutations) => {
45933
- for (const mutation of mutations) {
45934
- mutation.addedNodes.forEach((node2) => {
45935
- node2 instanceof HTMLElement && handler(node2, carrier);
45936
- });
45937
- }
45938
- });
45939
- observer.observe(document.head, {
45940
- childList: true
45932
+ for (const { addedNodes } of mutations)
45933
+ addedNodes.forEach((n2) => n2 instanceof HTMLElement && handler(n2, carrier));
45941
45934
  });
45935
+ observer.observe(document.head, { childList: true });
45942
45936
  document.addEventListener("DOMContentLoaded", () => {
45943
45937
  resolve2(carrier);
45944
45938
  observer.disconnect();
@@ -45948,15 +45942,13 @@ ${exposeCall}`
45948
45942
  function awaitCompileSfc(handler) {
45949
45943
  return __async(this, null, function* () {
45950
45944
  const clientCodeList = yield watchRoot((node2, clientCodeList2) => {
45951
- if (!/^(?:script|template|style)$/.test(node2.localName))
45952
- return;
45953
- if (node2.hasAttribute("src"))
45954
- return;
45945
+ if (!/^(?:script|template|style)$/.test(node2.localName)) return;
45946
+ if (node2.hasAttribute("src")) return;
45955
45947
  clientCodeList2.push(node2.outerHTML);
45956
45948
  node2.localName === "style" ? node2.onload = node2.remove : node2.remove();
45957
45949
  });
45958
45950
  const hasScript = clientCodeList.some((code) => code.slice(1, 7) === "script");
45959
- hasScript || clientCodeList.push("<script>/* empty script */<\/script>");
45951
+ hasScript || clientCodeList.unshift("<script>/* empty script */<\/script>");
45960
45952
  handler(compilerSfc(clientCodeList.join("\n")));
45961
45953
  });
45962
45954
  }
@@ -45964,24 +45956,15 @@ ${exposeCall}`
45964
45956
  return sfcStyleCompileResultsList.map((style) => style.code).join("\n");
45965
45957
  }
45966
45958
  function generateEsmCode(sfcAppBlock, sfcTemplateCompileResults) {
45967
- return `
45968
- ${INIT_CODE}
45969
- ${_scriptTransform(sfcAppBlock)}
45970
- ${_templateTransform(sfcTemplateCompileResults)}
45971
- ${CREATE_APP_CODE}
45972
- `;
45973
- function _scriptTransform(sfcAppBlock2) {
45974
- const s = new MagicString(sfcAppBlock2.content);
45975
- s.replace("export default", `${APP_VAR_NAME} =`);
45976
- sfcAppBlock2.isScoped && s.prependLeft(sfcAppBlock2.content.indexOf("__name"), `__scopeId: "data-v-${REPO_NAME}",`);
45977
- s.replace(/Object\.defineProperty\(__returned__.*/, "");
45978
- return s.toString();
45979
- }
45980
- function _templateTransform(sfcTemplateCompileResults2) {
45981
- const s = new MagicString(sfcTemplateCompileResults2.code);
45982
- s.replace("export function render", `${APP_VAR_NAME}.render = function`);
45983
- return s.toString();
45984
- }
45959
+ const _scriptTransform = ({ content }) => content.replace("export default", `${APP_VAR_NAME} =`).replace(/Object\.defineProperty\(__returned__.*/, "");
45960
+ const _templateTransform = ({ code }) => code.replace("export function render", `${APP_VAR_NAME}.render = function`);
45961
+ return [
45962
+ INIT_CODE,
45963
+ _scriptTransform(sfcAppBlock),
45964
+ _templateTransform(sfcTemplateCompileResults),
45965
+ sfcAppBlock.isScoped ? SCOPED_ID_CODE : "",
45966
+ CREATE_APP_CODE
45967
+ ].join("\n");
45985
45968
  }
45986
45969
  function generator(compiledSfc) {
45987
45970
  const { sfcAppBlock, sfcStyleCompileResultsList, sfcTemplateCompileResults } = compiledSfc;
@@ -45991,10 +45974,11 @@ ${exposeCall}`
45991
45974
  };
45992
45975
  }
45993
45976
  awaitCompileSfc((compiledSfc) => {
45994
- const _toHead = (...args) => createDom(...args).mount(document.head);
45995
- const g = generator(compiledSfc);
45996
- _toHead(`<script ${REPO_NAME} type="importmap">${IMPORTS_JSON}<\/script>`);
45997
- _toHead(`<script ${REPO_NAME} type="module">`, g.esmCode);
45998
- _toHead(`<style ${REPO_NAME}>`, g.cssCode);
45977
+ var _a2, _b2, _c;
45978
+ const site = document["head"];
45979
+ const { cssCode, esmCode } = generator(compiledSfc);
45980
+ (_a2 = createDom(IMPORTS_TAG_CODE)) == null ? void 0 : _a2.mount(site);
45981
+ (_b2 = createDom(`<script ${REPO_NAME} type="module">`, ASCII_LOGO + esmCode)) == null ? void 0 : _b2.mount(site);
45982
+ (_c = createDom(cssCode && `<style ${REPO_NAME}>`, cssCode)) == null ? void 0 : _c.mount(document.head);
45999
45983
  });
46000
45984
  })();