Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug/343: SgColorSwatches built after page load with fetch / markup.js templates #368

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

drolsen
Copy link
Member

@drolsen drolsen commented Apr 26, 2018

Description

#343

  • Relocated the building up of SgColorSwatches out SgColorSwatch.jsx and into XHR/fetch call within SgColorSwatch.Container.js.
  • Adds isomorphic-fetch support so IE11 still works with fetch.
  • Relocates exported colors JSON file to dist/assets/dlls as this data to reflect better as dll data and to load with fetch.
  • The binding of data to markup is done with newly added Markup.js npm module that allows us to craft templates off dll data like this much faster in the future.

Motivation and Context

Styleguide color page had loading issues where the page would be left blank when:
A) first loading up dev and on said page.
B) made a color change in colors.css and said page refreshed.

The over all issue was that we were trying to both load and edit our colors.json export in a way that would cause build loops or stall the export of colors for a whole host of reasons.

By moving the build up of color swatches to be after page load via a XHR/fetch call to our colors.json export, we bypass the build loop issue and consistently loading the most recent exported version of our colors.json each page load.

How Has This Been Tested?

  • Ran dev and confirmed colors page is not empty
  • Updated color value in colors.css and refreshed page to edit compiled out instantly.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant