search

ractivejs / rvc

RequireJS loader plugin for Ractive components
20 stars 10 forks source link

Is there any tool that can extract JS, HTML and CSS from a Ractive component? #17

Closed jaygel179 closed 8 years ago

jaygel179 commented 8 years ago

I would like to know if there's an existing tool that can extract js/html/css part from a ractive component?

<div>
  ...
</div>

<style>
  ...
</style>

<script>
  component.exports = {
    ...
  }
</script>

If none then how possible it is to do? Basically I want to create a tool that for example extracts the js part of a component into a file, run jsLint to check the code validity and have it integrated with CI.

Thanks in advance.

fskreuz commented 8 years ago

You don't really need to extract the HTML. A Ractive component is just HTML to start with (minus the <html>, <body> etc.). You just need to wrap the entire component in <html><body>[component source]</body></html> before handing it over so that the linter considers it as a full HTML page.

To extract the CSS and JS, you can use rcu. You can use the parse function to get the CSS and JS (css and script properties, respectively) of the component in string form. You can then pass it on to their respective linters.

Note that components expect a component, require and Ractive "globals" to be present in the component script. You might want to configure your linter to expect those.

To visualize, your workflow would be:

component -> add html and body -> (html) "page"      -> html linter
component -> rcu.parse         -> (js) result.script -> js linter (i.e.: eslint)
component -> rcu.parse         -> (css) result.css   -> css linter (i.e.: csslint)
jaygel179 commented 8 years ago

Thanks @fskreuz! will close this issue.