Hey everyone! I’m designing a new hobby project, and I really wanted to work with single file components, so I took an hour or so of my Sunday afternoon and put together this script:
https://gist.github.com/josiahbryan/fb9022d79ab909a7173c5d4855facadf
This is, as it says on the tin, really simple single-file-component support. What does it do?
- Take one file (
my-component.hbs) with <template>, <script>, and <style> tags (see sample below)…
- And write out each tag into it’s own file where Ember expects to find it:
- The
<template> gets written to app/templates/components/my-component.hbs
- The
<style> gets written to app/styles/components/my-component.scss (NB .scss not .css - feel free to edit the script if you’re not using SASS)
- The
<script> gets written to app/components/my-component.js
When you combine this scripts built-in support for watching the files for changes and re-writing those files above, combined with ember serves built-in live reloading during development, then development on your Single-File-Component is just as simple as editing your single file app/sfcs/my-component.hbs and this script will write out those three files automatically, and ember will auto-detect and auto-rebuild your app bundle when it sees those files changed.
Feedback / suggestions all welcome!
To integrate into your Ember project, save the script from the gist above somewhere. (I created a folder called myproject/utils/
and put it there.) Then, add this line at the top of ember-cli-build.js:
require('./utils/debundle-sfc').watchAndRebuild();
IMPORTANT: You will HAVE to change the config.appRoot value embedded in the script, because it’s set for my app, and I’m guessing you don’t have the exact same folder path as I do.
Notes about appRoot:
-
appRoot must end with a slash (/)
-
appRoot must be the root of the Ember app (e.g. where the components/ folder is, etc.)
This script assumes you put your single-file-components in a folder under app/ called sfcs. Change
config below to change where they’re stored. Note this script expects your component files to have .hbs
as the extension.
Obviously, you’ll have to create the sfcs folder (app/sfcs) manually since Ember doesn’t generate it.
You can run this script manually from the command line, either one-time (node script.js)
or with a --watch argument to start the file watcher and rebuild (node script.js --watch) (Note: We watch the app/sfcs folder, not the individual files, so you can create new files in that folder and the script will automatically process those as well.) Note, we don’t REMOVE the generated files if you remove the component from app/sfcs - that’s an idea for future improvement, of course.
Obviously, when you add it to ember-cli-build with the .watchAndRebuild() call as shown above,
you don’t have to run it manually on the command line during development (assuming you have ember serve)
running in a console somwhere as you work.
Note: I use Atom as my text editor, and it’s built-in syntax highlighting for HBS “just works”.
Example single-file-component, I put the contents in app/sfcs/hello-world.hbs:
<template>
<h1 local-class='header'>
Hello, <b {{action 'randomName'}}>{{if name name 'World'}}!</b>
</h1>
</template>
<style>
.header {
/* For example ... */
background: #ccc;
}
</style>
<script>
// Script automatically appends Component import to generated .js file, other imports are up to you to add here
export default Component.extend({
tagName: '',
actions: {
randomName() {
this.set('name', "Person # " + (Math.random() * 1024).toFixed(0));
}
},
});
</script>
)
