feat: add require prop

Author: elevatebart

demo/App.vue

@@ -10,6 +10,8 @@
     <VueLive :code="codeSfc" :layout="CustomLayout"/>
     <h2>Pure JavaScript code</h2>
     <VueLive :code="codeJs" :layout="CustomLayout"/>
+    <h2>Use the requires prop to make libraries and packages available in the browser</h2>
+    <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
   </main>
 </template>
@@ -21,6 +23,8 @@ import DatePicker from "vuejs-datepicker";
 import codeSfc from "!!raw-loader!./assets/Button.vue";
 import codeJs from "!!raw-loader!./assets/input.js";
 import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";
+import codeChicago from "!!raw-loader!./assets/Chicago.jsx";
+import all from "./assets/chicagoNeighbourhoods";
 
 export default {
   name: "VueLiveDemo",
@@ -31,7 +35,9 @@ export default {
       codeSfc,
       codeTemplate,
       codeJs,
-      CustomLayout
+      codeChicago,
+      CustomLayout,
+      chicagoRequires: { chicagoNeighbourhoods: all }
     };
   }
 };

demo/assets/Chicago.jsx

@@ -0,0 +1,10 @@
+import all from "chicagoNeighbourhoods";
+let i = 4;
+const four = [];
+while (i--) {
+  let indexInList = Math.floor(Math.random() * all.length);
+  four.push(all[indexInList]);
+}
+
+<h3>What Chicago do you wish to visit tonight?</h3>
+<ul><li v-for="a in four">{{ a }}</li></ul>

demo/assets/chicagoNeighbourhoods.js

@@ -0,0 +1,248 @@
+export default [
+  "Albany Park",
+  "Altgeld Gardens",
+  "Andersonville",
+  "Archer Heights",
+  "Armour Square",
+  "Ashburn",
+  "Ashburn Estates",
+  "Auburn Gresham",
+  "Avalon Park",
+  "Avondale",
+  "Avondale Gardens",
+  "Back of the Yards",
+  "Belmont Central",
+  "Belmont Gardens",
+  "Belmont Heights",
+  "Belmont Terrace",
+  "Beverly",
+  "Beverly View",
+  "Beverly Woods",
+  "Big Oaks",
+  "Boystown",
+  "Bowmanville",
+  "Brainerd",
+  "Brickyard",
+  "Bridgeport",
+  "Brighton Park",
+  "Bronzeville",
+  "Bucktown",
+  "Budlong Woods",
+  "Buena Park",
+  "Burnside",
+  "Cabrini–Green",
+  "Calumet Heights",
+  "Canaryville",
+  "Central Station",
+  "Chatham",
+  "Chicago Lawn",
+  "Chinatown",
+  "Chrysler Village",
+  "Clarendon Park",
+  "Clearing East",
+  "Clearing West",
+  "Cottage Grove Heights",
+  "Cragin",
+  "Crestline",
+  "Dearborn Homes",
+  "Dearborn Park",
+  "Douglas Park",
+  "Dunning",
+  "East Beverly",
+  "East Chatham",
+  "East Garfield Park",
+  "East Hyde Park",
+  "East Pilsen",
+  "East Side",
+  "East Village",
+  "Eden Green",
+  "Edgebrook",
+  "Edgewater",
+  "Edgewater Beach",
+  "Edgewater Glen",
+  "Edison Park",
+  "Englewood",
+  "Fernwood",
+  "Fifth City",
+  "Ford City",
+  "Forest Glen",
+  "Fuller Park",
+  "Fulton River District",
+  "Gage Park",
+  "Galewood",
+  "The Gap",
+  "Garfield Ridge",
+  "Gladstone Park",
+  "Gold Coast",
+  "Golden Gate",
+  "Goose Island",
+  "Graceland West",
+  "Grand Boulevard",
+  "Grand Crossing",
+  "Greater Grand Crossing",
+  "Greektown",
+  "Gresham",
+  "Groveland Park",
+  "Hamilton Park",
+  "Hanson Park",
+  "Heart of Chicago",
+  "Hegewisch",
+  "Hermosa",
+  "Hollywood Park",
+  "Homan Square",
+  "Humboldt Park",
+  "Hyde Park",
+  "Illinois Medical District",
+  "Irving Park",
+  "Irving Woods",
+  "The Island",
+  "Jackowo",
+  "Jackson Park Highlands",
+  "Jefferson Park",
+  "K-Town",
+  "Kelvyn Park",
+  "Kennedy Park",
+  "Kensington",
+  "Kenwood",
+  "Kilbourn Park",
+  "Kosciuszko Park",
+  "Lake Meadows",
+  "Lake View",
+  "Lake View East",
+  "Lakewood / Balmoral",
+  "LeClaire Courts",
+  "Legends South (Robert Taylor Homes)",
+  "Lilydale",
+  "Lincoln Park",
+  "Lincoln Square",
+  "Lithuanian Plaza",
+  "Little Italy",
+  "Little Village",
+  "Logan Square",
+  "Longwood Manor",
+  "The Loop",
+  "Lower West Side",
+  "Loyola",
+  "Magnificent Mile",
+  "Margate Park",
+  "Marquette Park",
+  "Marshall Square",
+  "Marynook",
+  "Mayfair",
+  "McKinley Park",
+  "Merchant Park",
+  "Montclare",
+  "Morgan Park",
+  "Mount Greenwood",
+  "Museum Campus",
+  "New Eastside",
+  "Near North Side",
+  "Near West Side",
+  "New Chinatown",
+  "New City",
+  "Noble Square",
+  "North Austin",
+  "North Center",
+  "North Halsted",
+  "North Kenwood",
+  "North Lawndale",
+  "North Mayfair",
+  "North Park",
+  "Nortown",
+  "Norwood Park East",
+  "Norwood Park West",
+  "Oakland",
+  "O'Hare",
+  "Old Edgebrook",
+  "Old Irving Park",
+  "Old Norwood",
+  "Old Town",
+  "Old Town Triangle",
+  "Oriole Park",
+  "Palmer Square",
+  "Park Manor",
+  "Park West",
+  "Parkview",
+  "Peterson Park",
+  "Pill Hill",
+  "Pilsen",
+  "Polish Downtown",
+  "Polish Village",
+  "Portage Park",
+  "Prairie Avenue Historic District",
+  "Prairie Shores",
+  "Princeton Park",
+  "Printer's Row",
+  "Pulaski Park",
+  "Pullman",
+  "Ranch Triangle",
+  "Ravenswood",
+  "Ravenswood Gardens",
+  "Ravenswood Manor",
+  "River North",
+  "River West",
+  "River's Edge",
+  "Riverdale",
+  "Rogers Park",
+  "Roscoe Village",
+  "Rosehill",
+  "Roseland",
+  "Rosemoor",
+  "Saint Ben's",
+  "Sauganash",
+  "Schorsch Forest View",
+  "Schorsch Village",
+  "Scottsdale",
+  "Sheffield Neighbors",
+  "Sheridan Park",
+  "Sheridan Station Corridor",
+  "Sleepy Hollow",
+  "Smith Park",
+  "South Austin",
+  "South Chicago",
+  "South Commons",
+  "South Deering",
+  "South East Ravenswood",
+  "South Edgebrook",
+  "South Lawndale",
+  "South Loop",
+  "South Shore",
+  "Stateway Gardens",
+  "Stony Island Park",
+  "Streeterville",
+  "Talley's Corner",
+  "Tri-Taylor",
+  "Ukrainian Village",
+  "Union Ridge",
+  "University Village",
+  "Uptown",
+  "The Villa",
+  "Vittum Park",
+  "Wacławowo",
+  "Washington Heights",
+  "Washington Park",
+  "Wentworth Gardens",
+  "West Beverly",
+  "West Chatham",
+  "West Chesterfield",
+  "West DePaul",
+  "West Elsdon",
+  "West Englewood",
+  "West Garfield Park",
+  "West Humboldt Park",
+  "West Lakeview",
+  "West Lawn",
+  "West Loop",
+  "West Morgan Park",
+  "West Pullman",
+  "West Ridge",
+  "West Rogers Park",
+  "West Town",
+  "West Woodlawn",
+  "Wicker Park",
+  "Wildwood",
+  "Woodlawn",
+  "Wrightwood",
+  "Wrightwood Neighbors",
+  "Wrigleyville"
+];

jest.config.js

@@ -1,30 +1,22 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue'
-  ],
+  moduleFileExtensions: ["js", "jsx", "json", "vue"],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+    "^.+\\.jsx?$": "babel-jest"
   },
-  transformIgnorePatterns: [
-    '/node_modules/'
-  ],
+  transformIgnorePatterns: ["/node_modules/"],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    "^@/(.*)$": "<rootDir>/src/$1"
   },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
+  snapshotSerializers: ["jest-serializer-vue"],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
   ],
-  testURL: 'http://localhost/',
+  testURL: "http://localhost/",
   watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname'
+    "jest-watch-typeahead/filename",
+    "jest-watch-typeahead/testname"
   ]
-}
+};

src/Preview.vue

@@ -22,6 +22,10 @@ export default {
     components: {
       type: Object,
       default: () => {}
+    },
+    requires: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -71,7 +75,7 @@ export default {
           // - a script setting up variables => we set up the data property of renderedComponent
           // - a `new Vue()` script that will return a full config object
           script = renderedComponent.script;
-          data = getVueConfigObject(script, listVars) || {};
+          data = getVueConfigObject(script, listVars, this.requires) || {};
         }
         if (renderedComponent.html) {
           // if this is a pure template or if we are in hybrid vsg mode,

src/VueLive.vue

@@ -9,6 +9,7 @@
         :code="model"
         @detect-language="switchLanguage"
         :components="components"
+        :requires="requires"
       />
     </template>
   </VueLiveLayout>
@@ -47,6 +48,10 @@ export default {
     components: {
       type: Object,
       default: () => {}
+    },
+    requires: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {

src/utils/__tests__/getVueConfigObject.unit.js

@@ -2,12 +2,16 @@ import getVueConfigObject from "../getVueConfigObject";
 
 describe("getVueConfigObject", () => {
   it("should extract parameters", () => {
-    const data = getVueConfigObject("new Vue({param:'baz'})", []);
+    const data = getVueConfigObject("new Vue({param:'baz'})", [], {});
     expect(data.param).toBe("baz");
   });
 
   it("should assign variables to data", () => {
-    const data = getVueConfigObject("var foo = 'baz'; new Vue({})", ["foo"]);
+    const data = getVueConfigObject(
+      "var foo = 'baz'; new Vue({})",
+      ["foo"],
+      {}
+    );
     expect(data.data().foo).toBe("baz");
   });
 });