chrislopresto / ember-freestyle Goto Github PK
View Code? Open in Web Editor NEWCreate a component explorer for your Ember app
Home Page: https://chrislopresto.github.io/ember-freestyle
License: MIT License
Create a component explorer for your Ember app
Home Page: https://chrislopresto.github.io/ember-freestyle
License: MIT License
TypeError: Cannot set property '_directoryPath' of undefined
at Directory (/Users/mingliu/Workspace/prime/node_modules/broccoli-source/index.js:6:23)
at UnwatchedDir (/Users/mingliu/Workspace/prime/node_modules/broccoli-source/index.js:65:13)
at Class.treeForAddonStyles (/Users/mingliu/Workspace/prime/node_modules/ember-freestyle/index.js:56:38)
Apparently unwatchedTree
needs to be invoked as a constructor.
freestyle-usage
slugsfreestyle-usage
slugs optionalfreestyle-usage
component enables the focus featurefreestyle-usage
component results in a usage snippet in the style guide (and provide a component property to disable this)I want to render code, but not the snippet in some cases as it doesnβt add much to the styleguide. ie Headings, Typography, Color Palette.
When upgrading from 0.2.14 to 0.3.0 (and still with 0.4.0 or 0.4.1) im getting following error:
File: C:/projects/mvb-ember-ui-guides/tmp/sass_compiler-input_base_path-pJD3njA1.tmp/components/freestyle-notes.scss (12)
The Broccoli Plugin: [SassCompiler] failed with:
Error: File to import not found or unreadable: ../ember-freestyle/highlight.js/zenburn.
Parent style sheet: C:/projects/mvb-ember-ui-guides/tmp/sass_compiler-input_base_path-pJD3njA1.tmp/components/freestyle-notes.scss
at options.error (C:\projects\mvb-ember-ui-guides\node_modules\ember-freestyle\node_modules\ember-cli-sass\node_modules\broccoli-sass-source-maps\node_modules\node-sass\lib\index.js:291:26)
The broccoli plugin was instantiated at:
at SassCompiler.Plugin (C:\projects\mvb-ember-ui-guides\node_modules\broccoli-plugin\index.js:7:31)
at SassCompiler.CachingWriter [as constructor] (C:\projects\mvb-ember-ui-guides\node_modules\broccoli-caching-writer\index.js:18:10)
at new SassCompiler (C:\projects\mvb-ember-ui-guides\node_modules\ember-freestyle\node_modules\ember-cli-sass\node_modules\broccoli-sass-source-maps\index.js:20:17)
at C:\projects\mvb-ember-ui-guides\node_modules\ember-freestyle\node_modules\ember-cli-sass\index.js:38:12
at Array.map (native)
at SASSPlugin.toTree (C:\projects\mvb-ember-ui-guides\node_modules\ember-freestyle\node_modules\ember-cli-sass\index.js:35:34)
at C:\projects\mvb-ember-ui-guides\node_modules\ember-cli-preprocess-registry\preprocessors.js:180:26
at Array.forEach (native)
at processPlugins (C:\projects\mvb-ember-ui-guides\node_modules\ember-cli-preprocess-registry\preprocessors.js:178:11)
at module.exports.preprocessCss (C:\projects\mvb-ember-ui-guides\node_modules\ember-cli-preprocess-registry\preprocessors.js:148:10)
Do you have an idea what could cause this issue
So as to make the highlight.js dependency optional
Due to the forced quotation marks, you can't have multiple font families:
This could be another conflicting css issue, but I had to add class="FreestyleCollection-variant"
to my {{freestyle-variant}}
components to get them to display properly.
I'm not 100% sure this is a bug, but I was surprised by this behavior.
/freestyle
is not always the best route for the style guide to live. I, for instance need it to live in a sub directory due to custom server config. It is simple to move the files after they are created, but maybe there can be an option to provide a terminal prompt to pick where you want the route to be located during install?
So as to make remarkable dependency optional
Create a README with basic usage instructions to hold folks over until we have a proper documentation site.
Relevant PRs:
I was hoping to get a compiled version of the css needed for freestyle, since our project uses less and we cannot switch to sass.
So I generated a new Ember project and installed the freestyle addon.
The addon install generator adds a link in the index.html head to 'freestyle.css'. This file is present, but blank.
Similarly the @import rule in styles/app.scss fails to import anything.
Please let me know if you need more information
Currently, the ember-freestyle
service holds the default theme for the styleguide.
It would be nice if we could set a different theme from the freestyle-guide
component.
Something like:
The highlightJsTheme
argument will not be mandatory. If not provided, the guide will fall back to the service's defaultTheme
as it does today.
However, if a theme is given, it will become the defaultTheme
for the guide.
We should preserve the current flexibility of overriding the defaultTheme
at the freestyle-usage
component.
In other words, we should still be able to do
which would override the theme for that instance of the freestyle-usage
component, but not clobber the overall theme of the guide.
We can then implement a theme choice from the settings (or some other place)
The problem is that the rendered component and the code for that component are not adjacent when there are notes due to the ordering in freestyle-usage.hbs:
It should be possible to achieve an ordering like that of the Bootstrap documentation, where a rendered example is always followed by its code:
Replace with vanilla CSS media queries, at least for the time being
Document how to use https://github.com/kellyselden/ember-cli-funnel to exclude Freestyle-related content from production builds.
Rather than carry this as an explicit dependency, let's just document how to go about it. This will avoid conflicting with other unrelated use of ember-cli-funnel. It will also allow people to put some Freestyle guides/components in production while excluding others... will avoid the need to track/infer what portions of the app are using freestyle components... etc.
The freestyle-usage
component registers code snippets using its slug
property as a key. As such, slugs should be globally unique. As such, Freestyle should warn when duplicate slugs are detected.
Hey! I loved your emberconf talk and am looking forward to trying out this addon. Unfortunately I am getting the following error when I run ember install ember-freestyle
. Any thoughts?
The package [email protected] does not satisfy its siblings' peerDependencies requirements!
Error: The package [email protected] does not satisfy its siblings' peerDependencies requirements!
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/lib/install.js:125:32
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/lib/install.js:268:7
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/read-installed/read-installed.js:142:5
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
at cb (/Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
at cb (/Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
at cb (/Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
at /Users/rob/Workbench/savo-styleguide/node_modules/npm/node_modules/read-installed/read-installed.js:263:14
Hey, nice addon, love developing stuff using it!
However, I noticed that after installation, files seem to be getting watched twice.
This results in cli log statements like file changed templates/application.hbs
being logged twice with each change. Dont have proof, but I feel recompilation/live reloading gets slower, thus.
Have an idea whats causing this? Is there maybe a way I can hack a workaround into my node_modules?
Everything's working fine in v0.2.14, however when I tried upgrading my project to use [email protected] I get this error:
File: /Users/jayvics/Documents/workspace/prime/tmp/sass_compiler-input_base_path-YH6H5llX.tmp/app/styles/app.scss (15)
The Broccoli Plugin: [SassCompiler] failed with:
Error: File to import not found or unreadable: ember-freestyle.
Parent style sheet: /Users/jayvics/Documents/workspace/prime/tmp/sass_compiler-input_base_path-YH6H5llX.tmp/app/styles/app.scss
at options.error (/Users/jayvics/Documents/workspace/prime/node_modules/node-sass/lib/index.js:291:26)
The broccoli plugin was instantiated at:
at SassCompiler.Plugin (/Users/jayvics/Documents/workspace/prime/node_modules/broccoli-plugin/index.js:7:31)
at SassCompiler.CachingWriter [as constructor] (/Users/jayvics/Documents/workspace/prime/node_modules/broccoli-caching-writer/index.js:18:10)
at new SassCompiler (/Users/jayvics/Documents/workspace/prime/node_modules/broccoli-sass-source-maps/index.js:20:17)
at /Users/jayvics/Documents/workspace/prime/lib/css/plugin.js:146:12
at Array.map (native)
at CSSPlugin.sassTree (/Users/jayvics/Documents/workspace/prime/lib/css/plugin.js:143:34)
at CSSPlugin.toTree (/Users/jayvics/Documents/workspace/prime/lib/css/plugin.js:173:19)
at /Users/jayvics/Documents/workspace/prime/node_modules/ember-cli-preprocess-registry/preprocessors.js:180:26
at Array.forEach (native)
at processPlugins (/Users/jayvics/Documents/workspace/prime/node_modules/ember-cli-preprocess-registry/preprocessors.js:178:11)
Ok. Sorry for the multiple opening and closing of the issue.
Details of the error I'm getting below.
directory tmp/compass_compiler-output_path-cZ1BYm98.tmp/assets
error tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles/app.scss (Line 12 of tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles/components/freestyle-notes.scss: File to import not found or unreadable: ../ember-freestyle/highlight.js/tomorrow-night.
Load paths:
Compass::SpriteImporter
/Users/mboudeau/WNYC/puppysite/overhaul/tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles
/usr/local/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets)
error tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles/ember-freestyle.scss (Line 12 of tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles/components/freestyle-notes.scss: File to import not found or unreadable: ../ember-freestyle/highlight.js/tomorrow-night.
Load paths:
Compass::SpriteImporter
/Users/mboudeau/WNYC/puppysite/overhaul/tmp/compass_compiler-input_base_path-Kchey5cH.tmp/0/app/styles
/usr/local/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets)
Compilation failed in 2 files.
Add a changelog using https://github.com/skywinder/Github-Changelog-Generator
Would be awesome to remove the bower deps of remarkable
and highlightjs
from this addon and use it from NPM instead.
The purpose of this issue is to do a brain dump so we all can drive out tasks, PRs, and goals together. @chrislopresto has various ideas in his head that need to be shared and fleshed out to get some good collaboration rolling.
The outcome of this issue should be a roadmap with accessible issues that people can jump into.
To be continued
Currently, code snippets are delimited using comments of the form // BEGIN-FREESTYLE-USAGE unique-slug
.
There is also a hacky technique of appending :notes
to the end of the slug to indicate that the snippet content is in fact markdown: /* BEGIN-FREESTYLE-USAGE unique-slug:notes
. This allows the freestyle-usage
component to render both "regular" code snippets and "markdown-notes" code snippets (currently shown in the demo app with the freestyle-palette-item
example, which uses the fpi
slug).
Instead we should support different delimiters for different types of snippet content. For example: // BEGIN-FREESTYLE-USAGE
vs /* BEGIN-FREESTYLE-MARKDOWN
.
ember-freestyle/freestyle-usage-snippet-finder.js
Lines 55 to 58 in a307ce0
ember-freestyle/addon/components/freestyle-usage.js
Lines 22 to 39 in a307ce0
ember-freestyle/addon/templates/components/freestyle-usage.hbs
Lines 14 to 31 in a307ce0
Template does not display component and clicking on menu icon produces the following error
Uncaught Error: Assertion Failed: You cannot use `attributeBindings` on a tag-less component: <action-chat-client@component:freestyle-notes::ember1328>
{{#freestyle-guide
title='Samewave styleguide'
subtitle='Living Style Guide'
}}
{{#freestyle-section name='Visual Style' as |section|}}
{{#freestyle-subsection name='Typography' section=section}}
{{#freestyle-usage 'typography-times' title='Times New Roman'}}
{{freestyle-typeface fontFamily='Times New Roman'}}
{{/freestyle-usage}}
{{#freestyle-usage 'typography-helvetica' title='Helvetica'}}
{{freestyle-typeface fontFamily='Helvetica'}}
{{/freestyle-usage}}
{{/freestyle-subsection}}
{{/freestyle-section}}
{{/freestyle-guide}}
The highlight.js payload is too big to responsibly bring into consuming application's builds. Options under consideration include a combination of:
Hi
Since updating ember cli to 2.5, I'm get getting lots of warnings:
/Users/oli/Projects/spa/emblr/node_modules/ember-freestyle/addon/modules/ember-freestyle/controllers/freestyle.js
0:0 warning File ignored by default. Use "--ignore-pattern '!node_modules/*'" to override
β 1 problem (0 errors, 1 warning)
/Users/oli/Projects/spa/emblr/node_modules/ember-freestyle/addon/modules/ember-freestyle/services/ember-freestyle.js
0:0 warning File ignored by default. Use "--ignore-pattern '!node_modules/*'" to override
β 1 problem (0 errors, 1 warning)
And can't seem to resolve this?
Any ideas?
The documentation is no longer valid with the v0.6.0 release an creates confusion for new users of the addon
Also, the default blueprints no longer work and provide no useful examples
Since Ember v.2.8 i get the following warning for all style-guide pages where I use collections.
DEPRECATION: Enumerable#contains
is deprecated, use Enumerable#includes
instead. [deprecation id: ember-runtime.enumerable-contains] See http://emberjs.com/deprecations/v2.x#toc_enumerable-contains for more details.
This issue could be fixed by replacing
!variants.contains(variantKey)
with
!variants.includes(variantKey)
in the file addon/components/freestyle-collection.js :27
I see there's a note in the readme about section yielding themselves to get subsection navigation, but it's not clear what that means.
Hey
I know this is WIP but I wonder if you could help me with the following error I get after running ember serve
after installing the addon:
Error: Merge error: file app/styles/app.scss exists in /Users/oli/Projects/emblr/tmp/broccoli_merge_trees-input_base_path-lqYGewTa.tmp/19 and /Users/oli/Projects/emblr/tmp/broccoli_merge_trees-input_base_path-lqYGewTa.tmp/25
Pass option { overwrite: true } to mergeTrees in order to have the latter file win.
at BroccoliMergeTrees._mergeRelativePath (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:212:17)
at BroccoliMergeTrees._mergeRelativePath (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:238:31)
at BroccoliMergeTrees._mergeRelativePath (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:238:31)
at BroccoliMergeTrees.build (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:50:24)
at /Users/oli/Projects/emblr/node_modules/broccoli-plugin/read_compat.js:61:34
at lib$rsvp$$internal$$tryCatch (/Users/oli/Projects/emblr/node_modules/rsvp/dist/rsvp.js:493:16)
at lib$rsvp$$internal$$invokeCallback (/Users/oli/Projects/emblr/node_modules/rsvp/dist/rsvp.js:505:17)
at lib$rsvp$$internal$$publish (/Users/oli/Projects/emblr/node_modules/rsvp/dist/rsvp.js:476:11)
at lib$rsvp$asap$$flush (/Users/oli/Projects/emblr/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/oli/Projects/emblr/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:29:10)
at BroccoliMergeTrees (/Users/oli/Projects/emblr/node_modules/broccoli-merge-trees/index.js:23:53)
at mergeTrees (/Users/oli/Projects/emblr/node_modules/ember-component-css/index.js:19:16)
at EmberApp.styles (/Users/oli/Projects/emblr/node_modules/ember-component-css/index.js:76:27)
at EmberApp.toArray (/Users/oli/Projects/emblr/node_modules/ember-cli/lib/broccoli/ember-app.js:1543:10)
at EmberApp.toTree (/Users/oli/Projects/emblr/node_modules/ember-cli/lib/broccoli/ember-app.js:1564:30)
at module.exports (/Users/oli/Projects/emblr/ember-cli-build.js:23:14)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/oli/Projects/emblr/node_modules/ember-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/oli/Projects/emblr/node_modules/ember-cli/lib/models/builder.js:89:10)
package.json:
"devDependencies": {
"broccoli-asset-rev": "^2.2.0",
"broccoli-sass": "^0.7.0",
"ember-ajax": "0.7.1",
"ember-body-class": "0.3.8",
"ember-cli": "2.4.2",
"ember-cli-app-version": "^1.0.0",
"ember-cli-babel": "^5.1.5",
"ember-cli-bourbon": "^1.2.1",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-htmlbars": "^1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-qunit": "^1.2.1",
"ember-cli-release": "0.2.8",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-component-css": "0.1.7",
"ember-data": "^2.4.0",
"ember-data-filter": "^1.13.0",
"ember-data-has-many-query": "0.0.4",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-freestyle": "0.2.7",
"ember-load-initializers": "^0.5.0",
"ember-resolver": "^2.0.3",
"ember-truth-helpers": "^1.2.0",
"loader.js": "^4.0.0"
}
bower.json:
"dependencies": {
"ember": "2.4",
"ember-cli-shims": "0.1.0",
"ember-cli-test-loader": "0.2.2",
"ember-qunit-notifications": "0.1.0",
"bourbon": "4.2.6",
"remarkable": "1.6.2",
"highlightjs": "9.1.0"
}
Thanks
This is during upgrade from 0.2.14
to 0.4.1
. It looks like app/styles/ember-freestyle.scss
is gone in this version.
According to the release notes for 0.2.14, we are now supposed to be using the new _notes
syntax for freestyle-note
instead of :notes
.
However, when using the new syntax, the notes are not showing up at all. They are still showing up using the old syntax.
Just had a hard time to get this addon running on windows.
I know not many use windows as their operating system in the ember community, but unfortunatelly I have to, due to my employer :-(
Running on windows the addon does not render handlebars snippets for freestyle-usage
as well as notes do not work.
As I found out this is because the freestyle-usage-snippet-finder
and the freestyle-usage
component use colons :
to seperate the slug from notes and usage.
This is then used as temporary filenames on build time, which windows does not support.
To get it running I would suggest to use an underscore instead of the colon. What do you think?
I have 30 different icons whose docs each look like
I wanted to DRY that up with something like
While the rendered
block shows up fine, the code snippet is blank.
I also tried
with
with the same effect.
Is there something I can do to make ember-freestyle pick up the fact that I want each of those to get a usage snippet?
It would be fine if there would be a solution for using ember-freestyle with fastboot. At the moment there are a few warnings like:
Query params are not included in href attributes when using link-to with ember-cli-staticboot. If you require query params this suggests your app is dynamic and not best suited for ember-cli staticboot.
It's because of the links in the navigation.
Just ran into a conflict with ember-autoresize, which uses ember-code-snippet's snippetSearchPaths
option name. This totally breaks my broccoli build π
Freestyle options should be scoped under a dedicated options object.
There are three separate, related components for including notes in a Freestyle guide: freestyle-notes
, freestyle-note
, and freestyle-annotation
. This unnecessarily complicated approach is a result of quick prototyping. Let's simplify it.
Hi, today I tried to install new ember-freestyle to replace my forked ember-freestyle version in project, but I got this when trying to install it.
ember install ember-freestyle
Path must be a string. Received null
TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.join (path.js:1211:7)
at CoreObject.<anonymous> (/usr/lib/node_modules/ember-cli/lib/models/addon-discovery.js:117:26)
at Array.map (native)
at CoreObject.discoverFromDependencies (/usr/lib/node_modules/ember-cli/lib/models/addon-discovery.js:107:70)
at CoreObject.discoverChildAddons (/usr/lib/node_modules/ember-cli/lib/models/addon-discovery.js:69:33)
at CoreObject.discoverAddons (/usr/lib/node_modules/ember-cli/lib/models/addon.js:218:42)
at CoreObject.initializeAddons (/usr/lib/node_modules/ember-cli/lib/models/addon.js:231:10)
at setupRegistryForEachAddon (/usr/lib/node_modules/ember-cli/node_modules/ember-cli-preprocess-registry/preprocessors.js:18:10)
at Object.module.exports.setupRegistry (/usr/lib/node_modules/ember-cli/node_modules/ember-cli-preprocess-registry/preprocessors.js:46:3)
I have cleaned the npm cache and removed node_modules
I filed an issue at stefanpenner/async-disk-cache#58 which I think is where the error is, but figured I'd post something here too to see what's up
When trying to build after upgrading freestyle, I see TypeError: heimdall.hasMonitor is not a function
Currently, freestyle only seems to work in an app, but not an addon. It should work in either.
I've run the example "dummy" app multiple times and things work great, but when I use the addon generators w/ nearly the exact same markup, I don't see any of the inline rendered snippets for code/markup/etc.
I have this issue with my custom components as well as the default freestyle-palette components.
Any tips for how to debug/troubleshoot?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.