Building my first Component Library in Vue!?

by Ringo kam

Building a Graph Editor

src (react-diagram)https://github.com/projectstorm/react-diagrams

Context

  1. Goals of My Project
  2. Make things configurable!
  3. Dependency Management
  4. Testing
  5. Project Organization with Lerna
  6. Build & Distribution (CI/CD)

​(part 2?)

Library Goals

Easy to use Node Graph Diagram

  1. Everything should be customizable and Configurable
    • HTML based Node 
    • Configurable CSS
  2. Create edge between node by click drag and drop.
  3. State should exist outside of the the graph, the library itself should hold no state besides the coordinate information

Make things configurable! :props

Make things configurable?

Make things configurable! <slot>

Make things configurable! <component />

  1. Make sure the component that you are rendering are registered on Vue
     
  2. Pass in the name of the component
    <component :is="componentName">
    props and events work the same way 😃

use extends to hide library implementation detail

Make things configurable  <slot> <component/> </slot>

src: https://github.com/newcat/baklavajs

Provide and Inject

Provide and Inject

GrandParent (Canvas)

Parent (Node)

Child (Connector)

Dependency

Use Peer Dependency for library!

Thinking about a writing a component library? 

 

 Do some research for existing library!!!

 

🤔

Check out  https://github.com/newcat/baklavajs

Met 80% of my use case! Would have save me weeks of time 😭

Made with Slides.com