{ "file": "addon/components/fountainhead-runtime-description.js", "content": "
import Ember from 'ember';\nimport Component from 'ember-component';\nimport hbs from 'htmlbars-inline-precompile';\nconst { HTMLBars, getOwner } = Ember;\n\nconst dataStripper = /(data=({.*}))\\n/;\n\n/**\n * Generates a description during runtime by using HTMLBars to compile any\n * string to a partial. This allows us to create descriptions from JSON\n * responses with components inside of them.\n *\n * TODO: Name partials by class+type+name for re-use\n * @class FountainheadRuntimeDescription\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * The content string that should be rendered. This string is passed to the\n   * runtime compiler and registered as a partial if compilation is successful.\n   * @property content\n   * @type {string}\n   * @default ''\n   */\n  content: '',\n  /**\n   * The string that should be converted to a partial\n   * @property description\n   * @type {string}\n   * @default ''\n   * @deprecated\n   */\n  description: '',\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * @property classNames\n   * @type {Array}\n   * @default ['fh-description']\n   */\n  classNames: ['fh-description'],\n  /**\n   * If there is a parsing error during the template compilation the catch block\n   * will set it as the `compilerError`. This parsing error is rendered for\n   * easier debugging of invalid content.\n   * @property compilerError\n   * @type {?string}\n   * @default null\n   */\n  compilerError: null,\n  /**\n   * Name of generated partial that is used in the template.\n   * @property partialName\n   * @type {string}\n   */\n  partialName: '',\n\n  // Methods\n  // ---------------------------------------------------------------------------\n  /**\n   * Looks through the passed-in template string and checks for action helpers;\n   * when it finds some, it checks for the actions referenced and registers no-ops\n   * for them on this component's context so that the application doesn't explode\n   * when trying to reference a non-existent action.\n   *\n   * @method _checkActionRefs\n   * @param {String} templateString The template string to run the check for action matches on\n   * @return {undefined}\n   */\n  _checkActionRefs(templateString) {\n\n    if (!templateString) { return; }\n\n    const firstFilter = /action\\s\"(\\w*?)\"/gim;\n    const secondFilter = /\\'(.*?)\\'/gi;\n    let matchedActions = templateString.match(firstFilter);\n\n    if (!matchedActions) { return; }\n\n    let actionNames = matchedActions.map(item => {\n      return item.replace(/\\\"/g, '\\'').match(secondFilter)[0].replace(/\\'/g, '');\n    });\n\n    // Loop through the list of actions and set up no-ops on the local context\n    // so that the test app doesn't explode\n    actionNames.forEach(action => {\n      if (!this.get(`actions.${action}`)) {\n        this.set(`actions.${action}`, function() {});\n        console.log(`Setting up a no-op for action name of ${action}`); //:brule:\n      }\n    });\n  },\n  /**\n   * Grabs the input from the parent instance's code editor, compiles it into a\n   * real-live HTMLBars template, registers it on the container as a partial\n   * and makes it available as output for the preview component's template to\n   * render.\n   *\n   * New partials are created for every change, using a date string as the\n   * partial name to avoid collisions.\n   *\n   * TODO: Use lookup partial names that can be mapped and retrieved instead of\n   * making new ones each time\n   *\n   * @method _generateDescription\n   * @param {string} templateString String to generate template from\n   */\n  _generateDescription(templateString) {\n    try {\n      let timestamp = Date.now();\n\n      // Ensure non-existant passed in actions don't cause the app to explode\n      this._checkActionRefs(templateString);\n\n      // Compile the string into a template and register it on the container\n      getOwner(this).register(`template:partials/live-preview-${timestamp}`, HTMLBars.compile(templateString));\n      // Update the reference of the preview's partialName to match the newly generated partial\n      this.set('partialName', `partials/live-preview-${timestamp}`);\n      this.set('compilerError', '');\n    } catch(ex) {\n      this.set('partialName', '');\n      this.set('compilerError', ex);\n    }\n  },\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * On init we map the passed `contextActions` to real actions in this\n   * component's actions hash to ensure they're available at compile time.\n   * @method init\n   */\n  init() {\n    this._super(...arguments);\n\n    const actions = this.get('contextActions');\n    const yellAboutIt = (thang) => { console.log(`${thang} called`); };\n\n    for (let action in actions) {\n\n      if (!(actions.hasOwnProperty(action))) { return; }\n      if (this.get(`actions.${action}`)) { return; } // already set, do less\n\n      if (typeof actions[action] === 'function') {\n        this.set(`actions.${action}`, action);\n      } else {\n        this.set(`actions.${action}`, yellAboutIt(action));\n      }\n    }\n  },\n  /**\n   * Whenever attrs are received fire the `_generateDescription` method to\n   * generate a partial that will be rendered.\n   *\n   * @event didReceiveAttrs\n   */\n  didReceiveAttrs() {\n    const description = this.getWithDefault('description', '');\n    this._addDataTagVariables(description);\n\n    const stripped = this._stripDataTags(description);\n    this._generateDescription(stripped);\n  },\n  /**\n   * Given a description string strips any\n   * data tags from the code example.\n   *\n   * @method _stripDataTags\n   * @return {String}\n   */\n  _stripDataTags(docString) {\n    return docString.replace(dataStripper, '');\n  },\n  /**\n   * Given a descriptions string, extracts data tags, parses JSON\n   * and adds the properties to this component, allowing them\n   * to be used in code examples.\n   *\n   * If we have a `glimmer` block which has `data={\"colors\": [\"red\", \"green\", \"blue\"]}`\n   * this will add a property `colors` to the component with the value `[\"red\", \"green\", \"blue\"]`\n   *\n   * Presents users with an error message if the JSON cannot be parsed\n   *\n   * @method _addDataTagVariables\n   * @param {string} docString\n   */\n  _addDataTagVariables(docString) {\n    const dataTagMatches = dataStripper.exec(docString);\n    if (dataTagMatches) {\n      const [,,data] = dataTagMatches;\n\n      try {\n        const propertiesToAdd = JSON.parse(data);\n\n        Object.keys(propertiesToAdd).forEach(property => {\n          this.set(property, propertiesToAdd[property]);\n        });\n      }\n      catch(e) {\n        this.set('jsonParseError', true);\n        this.set('jsonString', data);\n      }\n\n    }\n  },\n  // Actions\n  // ---------------------------------------------------------------------------\n  actions: {},\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    <div class='partial-wrapper'>\n      {{#fountainhead-state as |state stateActions|}}\n        {{partial partialName}}\n        {{#if jsonParseError}}\n          {{#fountainhead-alert brand='danger' classNames='compiler-error'}}\n            <p>There was an error parsing the JSON of your data example</p>\n            <p>Please check {{jsonString}}</p>\n          {{/fountainhead-alert}}\n        {{/if}}\n      {{/fountainhead-state}}\n\n      {{! Render parsing errors for debugging. Can be hidden with CSS if desired }}\n      {{#if compilerError}}\n        {{#fountainhead-alert brand='danger' classNames='compiler-error'}}\n          <h4>Compiler Error</h4>\n          <p>\n          There was a problem compiling the handlebars syntax in the\n          markdown description for this class. <b>Note:</b> Any line numbers\n          referenced below start from the first line of the markdown description.\n          </p>\n          <p><b>{{compilerError}}</b></p>\n        {{/fountainhead-alert}}\n      {{/if}}\n    </div>\n  `\n});\n
" }