Question: integrating external libraries
wilk opened this issue · comments
In my Eve application I need to use some widgets that are already built using other libs and frameworks (think about projects like material design, a set of ready-to-use HTML components/widgets).
How can I import Javascript libs (for HTML custom components) in an Eve application?
Do they work just by adding records like [#my-custom-component attr: "value"] or Eve needs to know how to interpret that particular record?
And what about CSS libs?
I tried to include a whole library like bulma but it changed the entire IDE layout and style: https://gist.github.com/anonymous/421dd499f02a4b3d2d35e0589f4ec06c
Is there a way to add a CSS libs without breaking the IDE?
Thanks a lot.
Wilk
In terms of CSS libs, the reason it's causing the editor to break is that it defines a lot of classes that the editor already has defined, so it's overwriting them. To not break the IDE, you'd have to make sure these collisions don't happen. Prefixing all of the Eve CSS with .eve-editor or something would do the trick, and would be a short-term solution at least.
Talking about CSS: yes, I saw that there's no such of an iframe that wraps the preview application so currently it's really not possible to include global css rules.
This is a huge restriction in terms of integration: it would be awkward being forced to exclude generic CSS frameworks like bulma or making some temporary workaround to make them working with Eve.
What about isolating the preview section with it's "Eve VM" (Eve is not compiled but interpreted, am I right?) in an iframe and passing source changes from the ide?
I know that working with iframes it's painful but it guarantees you to put in your application everything you want with no worries.
@joshuafcole wrapping the app in an iframe does seem like a good idea that probably isn't a crazy amount of effort. It would fix one of my issues with CSS blocks too (they're scoped funny so I can't set body styles and such)
That seems like a good direction to move in.
For pulling in CSS libraries, as a short term hack you can drop the content of the library into a document CSS block, which will automatically namespace the selectors for correctness.
For JS libraries, there's no way to do so yet without getting your hands dirty. It's currently item #3 on my todo list, but I expect it won't be a short project, since I'd like not to change the API out from under people once they start using it.
For building custom components as part of your app, see William's recent post on the mailing list:
https://groups.google.com/d/msg/eve-talk/vR-4y2kJv4Q/TaJXgsaSFAAJ
and if you have any other questions, please don't hesitate to bring them up in the mailing list.
https://groups.google.com/forum/#!forum/eve-talk
I recommend we close this issue and split it up into a few issues that track the completeness of our various extensibility problems.
Does that sound good?
For pulling in CSS libraries, as a short term hack you can drop the content of the library into a document CSS block, which will automatically namespace the selectors for correctness.
I wouldn't do that for CSS frameworks because even the minified version it's too big to put into a single block: in this way we're breaking the rule "Eve programs tend to be very small, but even more importantly, individual blocks remain short and single purpose."
For building custom components as part of your app, see William's recent post on the mailing list:
https://groups.google.com/d/msg/eve-talk/vR-4y2kJv4Q/TaJXgsaSFAAJ
I'm joining the discussion ;)
I recommend we close this issue and split it up into a few issues that track the completeness of our various extensibility problems.
Yeah, it's fine for me: let's split it up ;)
Wilk