david-desmaisons/componentfixture

🛠️Interactive sandox playground for vue components

David Desmaisons

---

⚡ About

• French born, living in Brazil
• Programming since the age of 10 (saudades Amstrad CPC 6128).
• I may accept freelance opportunities if related to Vue.js or Neutronium.
• Always curious and learning new languages/ algorithms/ concepts/ frameworks .
• If I am looking for some piece of software that I can not find, I may end up implementing and publishing it as a github repository.

🚀Main projects

• Neutronium a C# framework to build .NET MVVM desktop applications using HTML, CSS and javascript.
• RateLimiter a C# client-side rate limiting utility.
• ComposableAsync A framework to create, compose and inject asynchronous behaviors in .Net Framework and .Net Core. Including a circuit breaker and an in process actor model.
• CodeDependencyScanner A C# application to visualize and interact with .Net assembly objects (class, interface, enum, struct) and their dependencies.
• Vue.Draggable and vue.draggable.next components that handle drag-and-drop.
• Vue.D3.tree a component to display tree based on D3.js layout.
• Vue.D3.sunburst a sunburst component based on D3.js.
• 📈 vue-plotly a wrapper for plotly.js.
• 🛠️ vue-cli-plugin-component a vue-cli 3 plugin to create component.
• 🛠️ ComponentFixture an Interactive sandox playground for vue components.
• Vue.Resize a directive to detect resize events.

🔭Currently

• Improving Vue.D3.sunburst

☕ Others

• 🖋 I wrote an article about using slot for behaviors in vue.js.
• ☕If one of my repo has helped you, especially if you are using it in production, please consider making a donation.

componentfixture's Issues

Improve resize component to make it proportional to parent component

Too agressive styles

Hi.
this line breaks down component style

ComponentFixture/src/components/Sandbox.vue

Line 171 in 9242f66

height: 100%;

Also dist css file include bootstrap which also overrite components styles and components look different
For such project type better use only scoped styled componets

I very like this project but I can use it due these issues

Add Monkey atack

• Check changing type of object
• Add binding to attack parameters
• Add to default button
• Log monkey attack error on monkey attack component
• Create-accept seed value
• Stop monkey attack on destroy
• Add call the component method
• Add attack summary with seed
• Add replay attack button
• Add feedback whe attack ends
• Add mouse element optional
• Treat vue warn as error=> console.error
• Stop on first error
• Check bug when closing editors
• Check component reset with key
• Reset attack list

Add computed information

Implement a dynamic store for component data

• Transform object in a store module
• Bind componentFixture to the module
• Check behavior without vuex....

Add resizing

Add better switching of value type

Add button to clear events log

Add list of possible values for given props

Possible values will appear as drop-down in the editor.
Create version 2 (breaking changes)?

Use these values for monkey atack

• Add validation check?
• Check hot-reload
• Check display for object

Update npm package name in readme

npm install ComponentFixture fails with package not found. Package on npm is 'component-fixture'.

Rethink of an architecture to handle attack replay (re-write gremlin?)

Pluggable archicture for editor based on slot

Add v-model flag for props

Improve layout

• Improve item order
• feedback on v-model updates
• Check colors
• improve bool symbol
• Add property name on validation error
• Layout for multi-type props
• Dirty feedback

Component attributes

Hi!
Is it possible to prefix the component attributes to a fixed value?

example

export default {
  name: 'app',
  components: {
    ComponentFixture,
    Editor,
    component
  },
  data: () => ({
    value: 'my value'
  })
}

and then

<component-fixture class="content">
      
  <component v-model="value">
  </component>

  <Editor slot="control" slot-scope="scope" v-bind="scope"/>

</component-fixture>

Thanks!