Coder Social home page Coder Social logo

tamb / domponent Goto Github PK

View Code? Open in Web Editor NEW
75.0 2.0 2.0 38.6 MB

Build UI Components with the HTML You Already Have

Home Page: https://tamb.github.io/domponent/

License: MIT License

JavaScript 100.00%
stimulusjs lifecycle-methods component-lifecycle stateless-components react components

domponent's People

Contributors

barteksc avatar dependabot[bot] avatar tamb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

domponent's Issues

scopeElements utils memory leak

Scoping works with nested components of same type.
Refs and ref arrays get picked up from other components.
This becomes an issue with larger applications. But there is an initialization hit in performance for resolving this.

Possible solutions:

  • new query selector which accounts for the prefixed component name
  • enhanced filtering in scoped method
  • possible config option to include this, perhaps tradeoffs are not worth it? Requires some analysis.

integration tests

Need to test that state and props and dependents wire up correctly.
Would prefer to stick with Jest.

Merge state from DOM with default Component state

DOM state should overwrite component state. But the component should have a fallback state to whatever is specified in the constructor

data-state="{"count": 5}"

overwrites

this.state = {
  count: 4
};

data-state="{"count": 5}"

and

this.state = {
  count: 4,
  name: 'Joe'
};

Should retain default of Joe and have count of 5.

This could be written off as "it's a feature not a flaw", but the decision needs to be made DOM > JS. The DOM passes the props and state.

Create `ref-array` for arrays of items

Create ref-array to call document.querySelectorAll() and return as an array.
Converts nodelist to array.

Renaming the data attribute should be added as well.

Hooks

Trying to figure out a sane way to incorporate Hooks into the project.

Hooks should:

  • be reusable
  • be prototypical
  • have access to same DOM nodes?
  • have access to same props?
  • have access to same state?

Should this be baked into the library or treated as something to be sprinkled into components?

class Counter extends Component{
  constructor(props){
    super(props)
  }
  ...myHookObject
}

This should simply be doable without code changes and would require documentation changes.

Code Examples in Demo Site

Add a component to toggle the display of HTML and JS for that component. Code previews should have syntax highlighting.

Demo ES5 Global Object version

Docs need example of es5 version

var App = new Domponent.Init({
  selector: document.body,
  components: {}
});

Then adding, removing, registering, unregistering components.

create dynamic DOM refs

Support data-ref="fieldName" in html.

Then access it in the Component via this.fieldName.

This will simplify selecting. I guess it's nice to have.

create mixins method

Problem
How to share variables or reusable methods between components.

Solution:
Mixins

Basic idea is to add a this.$mixins to Scope or Exponent class, exposing it to everything. The mixin property will store references to different mixin objects and change the execution context of that object when one of the methods are called upon.

Possible issues are with this within a mixin method.

Possible solutions:

Possibly a $mixinCall method to wrap every property and method reference in? (Talk about performance hit there)

Creating this[mixinKey] within the class. It would equal either a value or the mixin method with bind. Mixins are shared. Mixin methods take new execution context. Mixin properties are copied by value.

add render method??

Proposal:

Exponent and Component should contain or allow composition for an optional render method that outputs HTML. The HTML should be template agnostic (handlebars, hyperstache, mustache, html, etc).

The benefit would be that the developer could leverage client-side templating and still have a small library available to bind data changes and events.

// handlebars example

render(props, state){

     // compile the template
     const template = Handlebars.compile(`
        <div data-component="MyComponent" name<-parentComponent: name>
          <p data-bind="state:MyComponent.count"> {{state.count}} </p>
          <p data-bind="props:MyComponent.count"> {{props.name}} </p>
          <p>  {{additionalData}} </p>
          <button type="button" data-action="click->MyComponent.increment">
            +1
          </button>
        </div>
     `);

     return template({
        props, 
        state, 
        additionalData: 'Howdy', 
        somethingElse: 'aloha' 
     });
}

This would be fired before the component is wired up:

  1. Fire render method if it exists
  2. Follow through with the rest of the constructor

** Must be compatible with mustache and handlebars! **
handlebars: https://handlebarsjs.com/guide/#installation
mustache: http://mustache.github.io/mustache.5.html

things to consider:

  • library weight (maybe this should be { render } imported separately.
  • How to handle loops?
    • Are we going to expect that loops will be within components (lists??). Need a working example
  • registering custom elements in App config?
    • tags: [ 'my-component', 'another-thing']
  • this will require a change in the order of the constructor functions.
  • maybe I set render to null and allow it to be overwritten by a utility? I can use call to apply the class instance
  • maybe the library will not get much bigger. But it will require and additional check at runtime. render will be it's own function.
  • This would require further lifecycle hooks for didMount willMount willUnmount and didUnmount

using custom tags:

<!-- potential usage-->
<my-component data-state='{name: "Michael Scott"}'></my-component>


<!-- JSP example -->
<c:forEach items="${dunderMifflinEmployees}" var="employee">
    <my-component data-state='{name: ${employee.name}}'></my-component>
</c:forEach>

This would then have to match up with a MyComponent class. The class could then contain a render method.

arguments against this proposal:

The purpose of this library is to leverage template-languages already in use. It's meant to add a declarative syntax to your HTML in order to bind data changes and events. Implementing client-side rendering would slow down the library and add to size. Also, we can easily call the templates before we initiate the components or the application.

Adding support for client-side rendering will possibly only add to the complexity of the library without much gain. If templating is already happening on the server, is there a need for this?

Create Components WITHOUT Init method

Ideally version 2 should have much simpler constructors for Component and Exponent classes.
They should accept the root node only.

Use of $app should be entirely optional.

Rerender Performance Test

Currently working on a Pug + Domponent test to rerender 124 divs individually at 10ms intervals:

Should finished tests against React, Inferno, Preact

Post results on README.md

Tests are in this repo https://github.com/tamb/pug-domponent

Operations per second. JS execution time.
Page load time.

data-attr-bind

Thinking in v3 of adding data-attr-bind

To be used like this:

<p data-attr-bind=attributeName:Component.field|attributeName2:Component.field>
<p>

Any HTMLElement attribute that exists can be set this way.
class attribute will have to function by removing first value and then adding new value.
This will only support int, string and DOMTokenList values

Should there be an API to update refs, ref-arrays, actions?

Exponent could be given API to update, add, or remove data-ref.
Exponent could be given API to update, add, or remove data-ref-array.
Exponent could be given API to update, add, or remove data-action.

This would increase the size of the framework.

helper methods for creating refs, etc could be added to actual Exponent class and could accept query string parameter for updating only specific refs, etc.

This could apply to adding/removing event handlers (data-action) methods to nodes.

Custom Syntax

Add an option to have custom syntax in addition the option for custom data attributes.

Example:

{
   actions: '=>',
   stateAndProps: '.',
   inheritProps: '<=',
}

Then the syntax is customizable

data-bind="state.Counter.count"
data-action="click=>Counter.increment"

Allow `$root` to accept `data-action`

Currently this.$root elements cannot accept a data-action.
Components must be wrapped in a div or another element and component $root needs to be the wrapper div in order to attach event listeners.
Rewrite helper functions to check $root node for additional data- attributes.

Feedback

I am working on a similar thing called dom99 The docs are a bit out of date, but check the examples.

After skimming through your project:

data-state

You basically evented yet another data format, consider instead using something native of the platform like

data-state="{count:24, isEven:true}"

or

data-state-count="24" data-state-isEven="true"

data-key

it is optional, must be unique , but what does it do ?

Component Fields

why prefix things with $ ?

do not commit domponent-1.0.0-alpha.18.tgz

Otherwise very interesting project, I give more detailed feedback later

Consider Client Rendered Components

Was considering client-side components.

class MyCounter extends Renderer

and it allows you to pass a custom render method which must return a string of html.
Then it fires the wiring up automatically.
So your actual DOM can look like this:

<my-counter data-props="..." data-key="..." data-state="..."/>

One concern is with nested custom elements:

<my-card>
  <my-counter/>
</my-card>

Ideally this could work. And you could pass attributes and state just like regular DOM-based components.

Ideas:

  • I could use the library common-tags and use the safeHTML tag. This way I can force the render method to be a tagged template literal. This would safely allow HMTL to be created. And you could create templates.
  • I could allow for a template literal to be returned from the render method and behind the scenes hydrate the template before appending it to the DOM using this.state.field or this.field, then I would wire up the component as a regular Component instance.
render(){
   const state = {
       name: "Mario"
   };
   return (
     `<div data-component="SayHello" 
             data-state='${JSON.stringify(state)}'>
          Hello, {this.name}!
     </div>`
   );
}

At this point should the user consider Polymer? React?

V3 goals

  • TypeScript support
  • decorators? (functional components)

create IIFE for CDN

Need to add something similar

"main": 
"dist/preact.js",
  "module": "dist/preact.module.js",
  "umd:main": "dist/preact.umd.js",

Need to transpile CDN code to es5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.