search

Mechazawa / vue2-teleport

Teleport component for vue2 that works the same as vue3's teleport
Creative Commons Zero v1.0 Universal
33 stars 4 forks source link

no use </script> str in dist code! #9

Open Yubiao-Li opened 3 months ago

Yubiao-Li commented 3 months ago

var vue_inject_styles = function (inject) { if (!inject) { return } inject("data-v-50f4b45b_0", { source: ".hidden[data-v-50f4b45b] {\n visibility: hidden;\n display: none;\n}\n\n/# sourceMappingURL=Teleport.vue.map /", map: {"version":3,"sources":["/home/shodan/Projects/vue2-teleport/src/Teleport.vue","Teleport.vue"],"names":[],"mappings":"AA2LA;EACA,kBAAA;EACA,aAAA;AC1LA;;AAEA,uCAAuC","file":"Teleport.vue","sourcesContent":["\n\n\n\n<style scoped lang=\"scss\">\n.hidden {\n visibility: hidden;\n display: none;\n}\n\n",".hidden {\n visibility: hidden;\n display: none;\n}\n\n/# sourceMappingURL=Teleport.vue.map /"]}, media: undefined });};

here is the sourcecode while you write in it. If anybody import your code by inline script like this

<script>
var __vue_inject_styles__ = function (inject) {
      if (!inject) { return }
      inject("data-v-50f4b45b_0", { source: ".hidden[data-v-50f4b45b] {\n  visibility: hidden;\n  display: none;\n}\n\n/*# sourceMappingURL=Teleport.vue.map */", map: {"version":3,"sources":["/home/shodan/Projects/vue2-teleport/src/Teleport.vue","Teleport.vue"],"names":[],"mappings":"AA2LA;EACA,kBAAA;EACA,aAAA;AC1LA;;AAEA,uCAAuC","file":"Teleport.vue","sourcesContent":["<template>\n  <div :class=\"classes\">\n    <slot/>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'teleport',\n  props: {\n    to: {\n      type: String,\n      required: true,\n    },\n    where: {\n      type: String,\n      default: 'after',\n    },\n    disabled: Boolean,\n  },\n  data() {\n    return {\n      nodes: [],\n      waiting: false,\n      observer: null,\n      parent: null,\n    };\n  },\n  watch: {\n    to: 'maybeMove',\n    where: 'maybeMove',\n    disabled(value) {\n      if (value) {\n        this.disable();\n        // Ensure all event done.\n        this.$nextTick(() => {\n          this.teardownObserver();\n        });\n      } else {\n        this.bootObserver();\n        this.move();\n      }\n    },\n  },\n  mounted() {\n    // Store a reference to the nodes\n    this.nodes = Array.from(this.$el.childNodes);\n\n    if (!this.disabled) {\n      this.bootObserver();\n    }\n\n    // Move slot content to target\n    this.maybeMove();\n  },\n  beforeDestroy() {\n    // Fix nodes reference\n    this.nodes = this.getComponentChildrenNode();\n\n    // Move back\n    this.disable();\n\n    // Stop observing\n    this.teardownObserver();\n  },\n  computed: {\n    classes() {\n      if (this.disabled) {\n        return ['teleporter'];\n      }\n\n      return ['teleporter', 'hidden'];\n    },\n  },\n  methods: {\n    maybeMove() {\n      if (!this.disabled) {\n        this.move();\n      }\n    },\n    move() {\n      this.waiting = false;\n\n      this.parent = document.querySelector(this.to);\n\n      if (!this.parent) {\n        this.disable();\n\n        this.waiting = true;\n\n        return;\n      }\n\n      if (this.where === 'before') {\n        this.parent.prepend(this.getFragment());\n      } else {\n        this.parent.appendChild(this.getFragment());\n      }\n    },\n    disable() {\n      this.$el.appendChild(this.getFragment());\n      this.parent = null;\n    },\n    // Using a fragment is faster because it'll trigger only a single reflow\n    // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment\n    getFragment() {\n      const fragment = document.createDocumentFragment();\n\n      this.nodes.forEach(node => fragment.appendChild(node));\n\n      return fragment;\n    },\n    onMutations(mutations) {\n      // Makes sure the move operation is only done once\n      let shouldMove = false;\n\n      for (let i = 0; i < mutations.length; i++) {\n        const mutation = mutations[i];\n        const filteredAddedNodes = Array.from(mutation.addedNodes).filter(node => !this.nodes.includes(node));\n\n        if (Array.from(mutation.removedNodes).includes(this.parent)) {\n          this.disable();\n          this.waiting = !this.disabled;\n        } else if (this.waiting && filteredAddedNodes.length > 0) {\n          shouldMove = true;\n        }\n      }\n\n      if (shouldMove) {\n        this.move();\n      }\n    },\n    bootObserver() {\n      if (this.observer) {\n        return;\n      }\n\n      this.observer = new MutationObserver(mutations => this.onMutations(mutations));\n\n      this.observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n        attributes: false,\n        characterData: false,\n      });\n\n      if (this.childObserver) {\n        return;\n      }\n      // watch childNodes change\n      this.childObserver = new MutationObserver(mutations => {\n        const childChangeRecord = mutations.find(i => i.target === this.$el);\n        if (childChangeRecord) {\n          // Remove old nodes before update position.\n          this.nodes.forEach((node) => node.parentNode && node.parentNode.removeChild(node));\n      te    this.nodes = this.getComponentChildrenNode();\n          this.maybeMove();\n        }\n      });\n\n      this.childObserver.observe(this.$el, {\n        childList: true,\n        subtree: false,\n        attributes: false,\n        characterData: false,\n      });\n    },\n    teardownObserver() {\n      if (this.observer) {\n        this.observer.disconnect();\n        this.observer = null;\n      }\n      if (this.childObserver) {\n        this.childObserver.disconnect();\n        this.childObserver = null;\n      }\n    },\n    getComponentChildrenNode() {\n      return this.$vnode.componentOptions.children\n        .map((i) => i.elm)\n        .filter((i) => i);\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"scss\">\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n</style>\n",".hidden {\n  visibility: hidden;\n  display: none;\n}\n\n/*# sourceMappingURL=Teleport.vue.map */"]}, media: undefined });

    };
</script>

it will cause error, please use <\/script> instead of </script>, or i think it's forget to provide the minify version