jsrope

v1.0.1-alpha

Published

3 years ago

test pointers by network tracker

0High
0Medium
0Low

Editor.md

RopeJS is a purely functional programming web framework that abstracts all elements into a single function, and all data binding is also implemented through passing parameters. So even if you don't use JSX like syntax, you can write a semantical DOM structure using javascript!

install or inject

npm i jsrope

<script src="https://xxxxxx.ropejs.js"></script>

Why use RopeJs?

Rope was born to perform simple page building without any web clis( npm vue-cli create-app... ), so once your HTML introduces RopeJs , your js can be as follows:

<html>
  <body>
    <style>
      span {
        display: block;
      }
    </style>
    <script src="./lib/rope.js"></script>
    <script type="text/javascript">
      const { Rope } = window
      const { text, div, hooks, input, list } = Rope;
      
      const rope = new Rope(1);
      const app = hooks((props, state, setState) => {
        return div(
          text(props, 'text'),
          text(state, 'text')
        );
      }, { text: 'Hello world!From state!' });

      document.body.appendChild(app({
        text: 'Hello world!From props!'
      }).element);

    </script>
  </body>
</html>

The operation result is shown in the figure!

Element

VElement

All components inherit from the VElementClass. Let's take the 'div component' as an example to demonstrate the basic functions of a component:

const { div } = Rope;

const child1 = div()
  .className('a-div-1')
  .style({
    width: '50px',
    height: '50px',
    backgroundColor: 'red'
  })
  .onClick(() => { alert('a-div-1') })

const child2 = div()
  .className('a-div-2')
  
// Direct nesting is allowed here
div(child1, child2)

Text

In Rope, a text component is defined as text, which is essentially a span. Let's take a look at the demonstration below:

const { text } = Rope;

test('I'm a span as text!)
  .className('a-text')
  .style({
    contSize: '12px',
    color: 'gray'
  })
  .onClick(() => { alert('a-text') })

Hook Component

Usually, we need to reuse a set of elements, that is, the concept of components. At this point, we need to use hooks

Use

const { hooks, div, text } = Rope;

const myComponent = hooks((props, state, setState) => {
  return div(
    text(props, 'text'),
    text(state, 'text')
  )
}, { text: "I'm state.text!" });

const props = {
    text: "I'm props.text!"
};
document.body.appendChild(myComponent(props))

Bind state && set state

Because RopeJS is filled with functions everywhere, the binding rules for data can be represented by the number of parameters to the function, using text as an example:

Static

The value of text here will never change!

const app = hooks((props) => {
  return text(props.text)
});

app({ text: "I'm props.text!" });

Dynamics

Here, the value of text always points to object.text!

const app = hooks((props) => {
  return text(props, 'text')
})

app({ text: "I'm props.text!" });

Dynamics with filter

The third parameter here can be a function, and the final value is based on the return value of the function!

const app = hooks((props) => {
  return text(props, 'text', (text) => {
    return `Text is: ${text}!`
  })
})

app({ text: "I'm props.text!" });