{"version":3,"sources":["webpack:///./src/slides/Module.vue?305b","webpack:///./src/slides/Module.vue?621d","webpack:///src/slides/Module.vue","webpack:///./src/slides/Module.vue?49a1","webpack:///./src/slides/Module.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_m","staticClass","_v","attrs","exportc","importc","staticRenderFns","name","data","components","Code","component"],"mappings":"2IAAA,yBAAqe,EAAG,G,yCCAxe,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,GAAGF,EAAG,MAAM,CAACG,YAAY,QAAQ,CAACP,EAAIM,GAAG,GAAGN,EAAIM,GAAG,GAAGF,EAAG,KAAK,CAACG,YAAY,aAAa,CAACP,EAAIQ,GAAG,0BAA0BJ,EAAG,MAAM,CAACG,YAAY,QAAQ,CAACH,EAAG,KAAK,CAACJ,EAAIQ,GAAG,YAAYJ,EAAG,OAAO,CAACK,MAAM,CAAC,KAAOT,EAAIU,QAAQ,OAAS,aAAa,GAAGN,EAAG,MAAM,CAACG,YAAY,QAAQ,CAACH,EAAG,KAAK,CAACJ,EAAIQ,GAAG,YAAYJ,EAAG,OAAO,CAACK,MAAM,CAAC,KAAOT,EAAIW,QAAQ,OAAS,aAAa,QACtdC,EAAkB,CAAC,WAAa,IAAIZ,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,SAAS,CAACA,EAAG,KAAK,CAACJ,EAAIQ,GAAG,YAAYJ,EAAG,KAAK,CAACJ,EAAIQ,GAAG,YAAY,WAAa,IAAIR,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACG,YAAY,OAAO,CAACH,EAAG,KAAK,CAACJ,EAAIQ,GAAG,SAASJ,EAAG,MAAM,CAACG,YAAY,OAAO,CAACH,EAAG,IAAI,CAACJ,EAAIQ,GAAG,8CAA+CJ,EAAG,IAAI,CAACJ,EAAIQ,GAAG,8CAA+CJ,EAAG,IAAI,CAACJ,EAAIQ,GAAG,gDAAiDJ,EAAG,MAAM,CAACG,YAAY,OAAO,CAACH,EAAG,IAAI,CAACJ,EAAIQ,GAAG,aAAaJ,EAAG,OAAO,CAACG,YAAY,aAAa,CAACP,EAAIQ,GAAG,mBAAqBR,EAAIQ,GAAG,uCAAwC,WAAa,IAAIR,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACG,YAAY,QAAQ,CAACH,EAAG,KAAK,CAACJ,EAAIQ,GAAG,UAAUJ,EAAG,MAAM,CAACG,YAAY,OAAO,CAACH,EAAG,IAAI,CAACJ,EAAIQ,GAAG,qDCwCt3B,G,UAAA,CACEK,KAAM,SACNC,KAFF,WAGI,MAAO,CACLJ,QAAS,wiBAoBTC,QAAS,sbAcbI,WAAY,CACVC,KAAM,WAAV,2DChFgV,I,wBCQ5UC,EAAY,eACd,EACAlB,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAK,E","file":"js/chunk-24dd2b12.dae488be.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module.vue?vue&type=style&index=0&id=95bbbb90&scoped=true&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module.vue?vue&type=style&index=0&id=95bbbb90&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._m(0),_c('div',{staticClass:\"grid\"},[_vm._m(1),_vm._m(2),_c('h2',{staticClass:\"grid-fill\"},[_vm._v(\"New way with modules\")]),_c('div',{staticClass:\"code\"},[_c('h3',[_vm._v(\"export\")]),_c('Code',{attrs:{\"code\":_vm.exportc,\"parent\":\"export\"}})],1),_c('div',{staticClass:\"code\"},[_c('h3',[_vm._v(\"import\")]),_c('Code',{attrs:{\"code\":_vm.importc,\"parent\":\"import\"}})],1)])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',[_c('h1',[_vm._v(\"Module\")]),_c('h2',[_vm._v(\"ES6\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"web\"},[_c('h3',[_vm._v(\"Web\")]),_c('div',{staticClass:\"old\"},[_c('p',[_vm._v(\"<script src=\\\"js/script1.js\\\" ></script >\")]),_c('p',[_vm._v(\"<script src=\\\"js/script2.js\\\" ></script >\")]),_c('p',[_vm._v(\"<script src=\\\"js/script3.js\\\" ></script >\")])]),_c('div',{staticClass:\"new\"},[_c('p',[_vm._v(\" <script \"),_c('span',{staticClass:\"highlight\"},[_vm._v(\"type=\\\"module\\\"\")]),_vm._v(\" src=\\\"js/app.js\\\"></script> \")])])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"node\"},[_c('h3',[_vm._v(\"Node\")]),_c('div',{staticClass:\"old\"},[_c('p',[_vm._v(\"var something = require('js/script1.js');\")])])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <header>\n      <h1>Module</h1>\n      <h2>ES6</h2>\n    </header>\n    <div class=\"grid\">\n      <div class=\"web\">\n        <h3>Web</h3>\n        <div class=\"old\">\n          <p>&lt;script src=\"js/script1.js\" &gt;&lt;/script &gt;</p>\n          <p>&lt;script src=\"js/script2.js\" &gt;&lt;/script &gt;</p>\n          <p>&lt;script src=\"js/script3.js\" &gt;&lt;/script &gt;</p>\n        </div>\n        <div class=\"new\">\n          <p>\n            &lt;script\n            <span class=\"highlight\">type=\"module\"</span> src=\"js/app.js\"&gt;&lt;/script&gt;\n          </p>\n        </div>\n      </div>\n      <div class=\"node\">\n        <h3>Node</h3>\n        <div class=\"old\">\n          <p>var something = require('js/script1.js');</p>\n        </div>\n      </div>\n      <h2 class=\"grid-fill\">New way with modules</h2>\n      <div class=\"code\">\n        <h3>export</h3>\n        <Code :code=\"exportc\" :parent=\"`export`\"/>\n      </div>\n      <div class=\"code\">\n        <h3>import</h3>\n        <Code :code=\"importc\" :parent=\"`import`\"/>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"Module\",\n  data() {\n    return {\n      exportc: `// objects, variables, classes, functions, ++ can be exported\nconst value1 = 10;\nconst value2 = 100;\n\n//exports value1 and can be named anything\nexport default value1;\n\n//exports multiple\nexport { value1, value2 };\n\n//exports multiple and renames them\nexport { value1 as v1, value2 as v2 };\n\n//exports multiple with a default\nexport { value1, value2 as default };\n\n//re-export everything from another module\nexport * from 'other-module';\n//re-export some components from another module\nexport { name1, name2 } from 'other-module';`,\n      importc: `//imports default export, can be named anything. default export required in modules.js\nimport defaultThing from 'modules.js';\n\n//imports every exports in a named variable\nimport * as values from 'modules.js';\nconsole.log(values.value1);\n\n//imports the exports we need. Names must match the exports\nimport { value1, value2 } from 'modules.js';\n\n//imports can rename the variable name\nimport { value2 as v2 } from 'modules';`\n    };\n  },\n  components: {\n    Code: () => import(\"@/components/Code.vue\")\n  }\n};\n</script>\n\n<style scoped>\nheader {\n  display: flex;\n  justify-content: space-between;\n}\ndiv {\n  display: flex;\n  flex-direction: column;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: 50% 50%;\n  flex: 1;\n  overflow: auto;\n}\n\n.old,\n.new {\n  padding: 15px;\n  border-radius: 5px;\n  margin: 5px;\n}\n\n.web .old {\n  background: #ff6961;\n}\n\n.node .old {\n  background: #ff392e;\n}\n\n.new {\n  background: #cafd96;\n}\n\n.highlight {\n  background: #fafa2b;\n}\n\n.grid-fill {\n  grid-column: 1 / -1;\n}\n\n.code {\n  margin: 15px;\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Module.vue?vue&type=template&id=95bbbb90&scoped=true&\"\nimport script from \"./Module.vue?vue&type=script&lang=js&\"\nexport * from \"./Module.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Module.vue?vue&type=style&index=0&id=95bbbb90&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"95bbbb90\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}