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.

Sign up for GitHub

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

Jump to bottom

feature(docs): enrich the 'inpage' script to read src and some more data- attributes #76

Merged
merged 4 commits into from
Aug 19, 2019
Merged

feature(docs): enrich the 'inpage' script to read src and some more data- attributes #76

merged 4 commits into from
Aug 19, 2019

Conversation

sverweij
Copy link
Owner

@sverweij sverweij commented Aug 19, 2019 •
edited
Loading

Description

  • Expands the 'in page' script with support for reading external sources with an src attribute.
  • Adds support to specifying the render engine (with the data-engine attributes), desugaring (with the data-desugar attribute).
  • Adds some simple error handling (for when rendering failed or the file couldn't be accessed)

Motivation and Context

  • makes it easier to manually inspect a bunch of various state charts
  • makes it easier to use state-machine-cat enables embedding state-machine-cat scripts on a page with a <script> tag, which for simple use cases reduces the amount of javascript necessary to a bare minimum.

How Has This Been Tested?

  • by employing eyeballs 😬
  • (and automated non-regression tests)

Samples

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>state machine cat - inpage sample</title>
    <script src="https://state-machine-cat.js.org/state-machine-cat-inpage.min.js" defer></script>
    <style>
      body {
        font-family: sans-serif; font-size: 18px;
        margin: 0 auto; max-width: 650px; line-height: 1.6; padding: 0 10px;
      }
    </style>
  </head>
  <body>
    <p>You can either directly embed scripts into the page...</p>
    <script type="text/x-smcat">
      on [color="darkgreen" active],
      off [color="maroon"];

      on => off [color="red"]: flickSwitch()
        / makeNoise("off.wav");
      off => on [color="#009900"]: flickSwitch()
        / makeNoise("on.wav");
    </script>

    <p>... or reference them by URL, as long as it is accessible from the state-machine-cat-inpage.min.js script</p>
    <script type="text/x-smcat" src="samples/cat.smcat">
    </script>

    <p>Not only works for smcat, but also for scxml:</p>
    <script type="text/x-scxml" src="samples/sprint-states.scxml">
    </script>
  </body>
</html>

... which will render something like this:
rendered_in_page

Types of changes

  • New feature (non-breaking change which adds functionality)

Checklist:

  • The code I add will be subject to The MIT license, and I'm OK with that.
  • The code I've added is my own original work.
  • 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.

@codeclimate
Copy link

codeclimate bot commented Aug 19, 2019

Code Climate has analyzed commit 6a1cfc5 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (100% is the threshold).

This pull request will bring the total coverage in the repository to 100.0% (0.0% change).

View more on Code Climate.

@sverweij sverweij merged commit 2cdc369 into develop Aug 19, 2019
@sverweij sverweij deleted the feature/snazzy-up-site-features branch August 19, 2019 18:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@sverweij