{"version":3,"sources":["app/lib/App.js","app/lib/API.js","app/lib/Router.js","app/views/templates.js","app/components/Root.js","app/main.js"],"names":["App","selector","appElement","document","querySelector","componentsByName","model","self","Proxy","set","target","property","value","updateView","component","name","proxify","currentComponent","controller","innerHTML","view","API","API_URL","fetch","then","res","json","id","result","films","Router","app","routes","hashChange","bind","window","addEventListener","url","push","hash","location","route","filter","match","RegExp","params","exec","showComponent","filmTemplate","film","title","poster","tagline","description","rootTemplate","root","api","addComponent","filmsHTML","reduce","html","getFilms","getFilm","router","Root","addRoute"],"mappings":";AAwCG,aAAA,SAAA,EAAA,EAAA,GAAA,KAAA,aAAA,GAAA,MAAA,IAAA,UAAA,qCAAA,SAAA,EAAA,EAAA,GAAA,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,OAAA,IAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,cAAA,EAAA,UAAA,IAAA,EAAA,UAAA,GAAA,OAAA,eAAA,EAAA,EAAA,IAAA,IAAA,SAAA,EAAA,EAAA,EAAA,GAAA,OAAA,GAAA,EAAA,EAAA,UAAA,GAAA,GAAA,EAAA,EAAA,GAAA,EAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,aAAA,EAxCkBA,IAAAA,EAwClB,WAvCWC,SAAAA,EAAAA,GAAU,EAAA,KAAA,GACfC,KAAAA,WAAaC,SAASC,cAAcH,GACpCI,KAAAA,iBAAmB,GAqCzB,OAAA,EAAA,EAAA,CAAA,CAAA,IAAA,UAlCOC,MAAAA,SAAAA,GACAC,IAAAA,EAAO,KACN,OAAA,IAAIC,MAAMF,EAAO,CACtBG,IAAIC,SAAAA,EAAQC,EAAUC,GAIb,OAFPF,EAAOC,GAAYC,EACnBL,EAAKM,cACE,OA2BZ,CAAA,IAAA,eAtBYC,MAAAA,SAAAA,GACNT,KAAAA,iBAAiBS,EAAUC,MAAQD,EACxCA,EAAUR,MAAQ,KAAKU,QAAQF,EAAUR,SAoB1C,CAAA,IAAA,gBAjBaS,MAAAA,SAAAA,GACPE,KAAAA,iBAAmB,KAAKZ,iBAAiBU,GAE1C,KAAKE,kBAAoB,KAAKA,iBAAiBC,YAC5CD,KAAAA,iBAAiBC,WAAW,KAAKD,iBAAiBX,OAEpDO,KAAAA,eAWN,CAAA,IAAA,aARY,MAAA,WACP,KAAKI,iBACFf,KAAAA,WAAWiB,UAAY,KAAKF,iBAAiBG,KAChD,KAAKH,iBAAiBX,OAGnBJ,KAAAA,WAAWiB,UAAhB,oCAEH,EAAA,GAAA,QAAA,QAAA;;ACvBA,aAAA,SAAA,EAAA,EAAA,GAAA,KAAA,aAAA,GAAA,MAAA,IAAA,UAAA,qCAAA,SAAA,EAAA,EAAA,GAAA,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,OAAA,IAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,cAAA,EAAA,UAAA,IAAA,EAAA,UAAA,GAAA,OAAA,eAAA,EAAA,EAAA,IAAA,IAAA,SAAA,EAAA,EAAA,EAAA,GAAA,OAAA,GAAA,EAAA,EAAA,UAAA,GAAA,GAAA,EAAA,EAAA,GAAA,EAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,aAAA,EAjBkBE,IAAAA,EAiBlB,WAhBa,SAAA,IAAA,EAAA,KAAA,GACPC,KAAAA,QAAU,2BAehB,OAAA,EAAA,EAAA,CAAA,CAAA,IAAA,WAZU,MAAA,WACFC,OAAAA,MAAM,KAAKD,SAASE,KAAK,SAAAC,GAAOA,OAAAA,EAAIC,WAW5C,CAAA,IAAA,UAROC,MAAAA,SAAAA,GACCJ,OAAAA,MAAS,GAAA,OAAA,KAAKD,UAClBE,KAAK,SAAAC,GACGA,OAAAA,EAAIC,SAEZF,KAAK,SAAAI,GACGA,OAAAA,EAAOC,MAAMF,EAAK,SAE9B,EAAA,GAAA,QAAA,QAAA;;ACUA,aAAA,SAAA,EAAA,EAAA,GAAA,KAAA,aAAA,GAAA,MAAA,IAAA,UAAA,qCAAA,SAAA,EAAA,EAAA,GAAA,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,OAAA,IAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,cAAA,EAAA,UAAA,IAAA,EAAA,UAAA,GAAA,OAAA,eAAA,EAAA,EAAA,IAAA,IAAA,SAAA,EAAA,EAAA,EAAA,GAAA,OAAA,GAAA,EAAA,EAAA,UAAA,GAAA,GAAA,EAAA,EAAA,GAAA,EAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,aAAA,EA3BkBG,IAAAA,EA2BlB,WA1BWC,SAAAA,EAAAA,GAAK,EAAA,KAAA,GACVA,KAAAA,IAAMA,EACNC,KAAAA,OAAS,GACTC,KAAAA,WAAa,KAAKA,WAAWC,KAAK,MAEvCC,OAAOC,iBAAiB,aAAc,KAAKH,YAC3CE,OAAOC,iBAAiB,mBAAoB,KAAKH,YAoBlD,OAAA,EAAA,EAAA,CAAA,CAAA,IAAA,WAjBQlB,MAAAA,SAAAA,EAAMsB,GACRL,KAAAA,OAAOM,KAAK,CACfvB,KAAAA,EACAsB,IAAAA,MAcH,CAAA,IAAA,aAXY,MAAA,WACLE,IAAAA,EAAOJ,OAAOK,SAASD,KACvBE,EAAQ,KAAKT,OAAOU,OAAO,SAAAD,GAC/BF,OAAAA,EAAKI,MAAM,IAAIC,OAAOH,EAAMJ,QAC5B,GACEI,GACGI,KAAAA,OAAS,IAAID,OAAOH,EAAMJ,KAAKS,KAAKP,GACpCR,KAAAA,IAAIgB,cAAcN,EAAM1B,OAExBgB,KAAAA,IAAIgB,oBAEZ,EAAA,GAAA,QAAA,QAAA;;ACZI,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,aAAA,QAAA,kBAAA,EAfA,IAAMC,EAAe,SAAAC,GAERA,MAAAA,uDAAAA,OAAAA,EAAKtB,GACFsB,6BAAAA,OAAAA,EAAKC,MAGRD,4DAAAA,OAAAA,EAAKE,OAAgBF,WAAAA,OAAAA,EAAKC,MACxBD,8BAAAA,OAAAA,EAAKG,QAEhBH,6CAAAA,OAAAA,EAAKI,YATgB,+CAezB,QAAA,aAAA,EAAA,IAAMC,EAAe,WAAA,MAAA,mVAArB,QAAA,aAAA;;ACbQ,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,aAAA,EAFf,IAAA,EAAA,QAAA,sBAEe,EAAA,CACbvC,KAAM,OACNT,MAAO,CACLiD,KAAM,IAERnC,KAAKd,SAAAA,GACI,OAAA,EAAP,EAAA,kBANW,QAAA,QAAA;;AC4Df,aA9DA,IAAA,EAAA,EAAA,QAAA,cACA,EAAA,EAAA,QAAA,cACA,EAAA,EAAA,QAAA,iBAEA,EAAA,QAAA,qBAGA,EAAA,EAAA,QAAA,sBAuDA,SAAA,EAAA,GAAA,OAAA,GAAA,EAAA,WAAA,EAAA,CAAA,QAAA,GApDA,IAAMyB,EAAM,IAAI/B,EAAJ,QAAQ,QACdwD,EAAM,IAAInC,EAAJ,QAOZU,EAAI0B,aAAa,CACf1C,KAAM,QACNT,MAAO,CACLuB,MAAO,IAETT,KAAKd,SAAAA,GACGoD,IAAAA,EAAYpD,EAAMuB,MAAM8B,OAC5B,SAACC,EAAMX,GAASW,OAAAA,EAAc,OAAA,QAAA,EAAaX,EAAAA,cAAAA,GAA3C,UACA,IAIES,MAAAA,mCAAAA,OAAAA,EAFJ,sBAMFxC,WAAWZ,SAAAA,GACTkD,EAAIK,WAAWrC,KAAK,SAAAI,GAClBtB,EAAMuB,MAAQD,EAAOC,WAK3BE,EAAI0B,aAAa,CACf1C,KAAM,OACNT,MAAO,CACL2C,KAAM,IAER7B,KAAKd,SAAAA,GACI,OAAA,EAAaA,EAAAA,cAAAA,EAAM2C,OAE5B/B,WAAWZ,SAAAA,GACTkD,EAAIM,QAAQC,EAAOlB,OAAO,IAAIrB,KAAK,SAAAI,GACjCtB,EAAM2C,KAAOrB,OAKnBG,EAAI0B,aAAaO,EAAjB,SAGA,IAAMD,EAAS,IAAIjC,EAAJ,QAAWC,GAC1BgC,EAAOE,SAAS,QAAhB,aACAF,EAAOE,SAAS,OAAhB,qBACAF,EAAOE,SAAS,OAAQ","file":"main.1ee7ebfb.map","sourceRoot":"..","sourcesContent":["export default class App {\n  constructor(selector) {\n    this.appElement = document.querySelector(selector);\n    this.componentsByName = {};\n  }\n\n  proxify(model) {\n    const self = this;\n    return new Proxy(model, {\n      set(target, property, value) {\n        // console.log(`Changing ${property} from`, target[property], `to`, value);\n        target[property] = value;\n        self.updateView();\n        return true;\n      }\n    });\n  }\n\n  addComponent(component) {\n    this.componentsByName[component.name] = component;\n    component.model = this.proxify(component.model);\n  }\n\n  showComponent(name) {\n    this.currentComponent = this.componentsByName[name];\n\n    if (this.currentComponent && this.currentComponent.controller) {\n      this.currentComponent.controller(this.currentComponent.model);\n    }\n    this.updateView();\n  }\n\n  updateView() {\n    if (this.currentComponent) {\n      this.appElement.innerHTML = this.currentComponent.view(\n        this.currentComponent.model\n      );\n    } else {\n      this.appElement.innerHTML = `<h1>An Error has occured</h1>`;\n    }\n  }\n}\n","export default class API {\n  constructor() {\n    this.API_URL = \"https://flick-api.now.sh\";\n  }\n\n  getFilms() {\n    return fetch(this.API_URL).then(res => res.json());\n  }\n\n  getFilm(id) {\n    return fetch(`${this.API_URL}`)\n      .then(res => {\n        return res.json();\n      })\n      .then(result => {\n        return result.films[id - 1];\n      });\n  }\n}\n","export default class Router {\n  constructor(app) {\n    this.app = app;\n    this.routes = [];\n    this.hashChange = this.hashChange.bind(this);\n\n    window.addEventListener(\"hashchange\", this.hashChange);\n    window.addEventListener(\"DOMContentLoaded\", this.hashChange);\n  }\n\n  addRoute(name, url) {\n    this.routes.push({\n      name,\n      url\n    });\n  }\n  hashChange() {\n    const hash = window.location.hash;\n    const route = this.routes.filter(route =>\n      hash.match(new RegExp(route.url))\n    )[0];\n    if (route) {\n      this.params = new RegExp(route.url).exec(hash);\n      this.app.showComponent(route.name);\n    } else {\n      this.app.showComponent();\n    }\n  }\n}\n","export const filmTemplate = film => `\n<section class=\"film-listing\">\n  <a href=\"#/film/${film.id}\">\n    <h3 class=\"name\">${film.title}</h3>\n    <section>\n      <figure>\n        <img src=\"${film.poster}\" alt=\"${film.title}\" />\n        <figcaption>${film.tagline}</figcaption>\n      </figure>\n      <p>${film.description}</p>\n    </section>\n  </a>\n</section>\n`;\n\nexport const rootTemplate = () => `\n<section>\n  <h1>Welcome to Flick, a developing MVC Framework.</h1>\n  <p>This framework is currently being written by Alex Kharouk.</p>\n  <p>Big shoutout to Coding Garden with CJ for the inspo.</p>\n  <p>See an example of the framework interacting with a film API   <a style=\"color: red;\" href=\"#/films\">here</a>.</p>\n</section>\n`;\n","import { rootTemplate } from \"../views/templates\";\n\nexport default {\n  name: \"root\",\n  model: {\n    root: {}\n  },\n  view(model) {\n    return rootTemplate();\n  }\n};\n","import App from \"./lib/App\";\nimport API from \"./lib/API\";\nimport Router from \"./lib/Router\";\n// Templates: TODO refactor into Components\nimport { filmTemplate } from \"./views/templates\";\n\n// Components that have MVC attached:\nimport Root from \"./components/Root\";\n\n// Middleware:\nconst app = new App(\"#app\");\nconst api = new API();\n\n/*\n * Creates a Component, This example is going to be for Films.\n * It takes in a model, what view you need, as well as the controller\n */\n// TODO refactor these components into separate file like Root\napp.addComponent({\n  name: \"films\",\n  model: {\n    films: []\n  },\n  view(model) {\n    const filmsHTML = model.films.reduce(\n      (html, film) => html + `<li>${filmTemplate(film)}</li>`,\n      \"\"\n    );\n    return `\n    <ul class=\"films\">\n      ${filmsHTML}\n    </ul>\n    `;\n  },\n  controller(model) {\n    api.getFilms().then(result => {\n      model.films = result.films;\n    });\n  }\n});\n\napp.addComponent({\n  name: \"film\",\n  model: {\n    film: {}\n  },\n  view(model) {\n    return filmTemplate(model.film);\n  },\n  controller(model) {\n    api.getFilm(router.params[1]).then(result => {\n      model.film = result;\n    });\n  }\n});\n\napp.addComponent(Root);\n\n// Routes in App:\nconst router = new Router(app);\nrouter.addRoute(\"films\", `^#/films$`);\nrouter.addRoute(\"film\", `^#/film/([0-9]*)$`);\nrouter.addRoute(\"root\", \"\");\n"]}