search

astoilkov / OneScript

:traffic_light: HTML, CSS and JavaScript brought together in one complete solution
MIT License
44 stars 2 forks source link

readme

OneScript Logo OneScript

HTML, CSS and JavaScript brought together in one complete solution

Hello World

<!doctype html>
<html> {
    <head> {
        <title>Hello from OneScript</title>
    }
    <body> {
      <h1>Hello from OneScript</h1>
      <h3>Let's count some numbers</h3>
      <ul> {
          defaultColor = 'blue'

          this.each([1, 2, 3, 5]);

          <css> {
              font-weight: bold;
              color: ${defaultColor};

              li:nth-child(even) {
                  color: yellow;
              }
          }

          <li>${this}</li>
      }
    }
}

What...what...what? So you write code in the HTML?

Yes. You could write code in the beginning of opened HTML tag. Tags could be opened with curly braces - this makes it more code-ish and the ending of a tag could be seen more clearly. You could read more about it [here]().

What is that CSS in the <ul>?

That's how OneScript handles CSS. This way the CSS is exactly where it should be. Read more about the power of OneScript CSS functionality [here]().

The result of the OneScript above will be:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello from OneScript</title>
        <style>
            ul {
                font-weight: bold;
                color: blue;

                li:nth-child(even) {
                    color: yellow;
                }
            }
        </style>
    </head>
    <body>
        <h1>Hello from OneScript</h1>
        <h3>Let's count some numbers<h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>5</li>
        </ul>
    </body>
</html>

Components

Custom components allow you to extract logic and reuse it multiple items. They are powerful tool that could help your application architecture.

<SignIn> : <form> {
    username = ''
    password = ''

    signIn() {
        if (this.username == 'admin' && this.password == 'admin') {
            alert('login successful');
        } else {
            alert('username or password was incorrect try with admin admin');
        }
    }

    <h1>Sign In</h1>
    <input placeholder="Enter your username"> {
        this.val(username);
    }
    <input placeholder="Enter your password"> {
        this.val(password);
    }
    <button>Sign in</button> {
        this.click(this.signIn);
    }
}

<!doctype html>
<html> {
    <body> {
        <h1>Hello Components</h1>
        <SignIn>
    }
}

Result:

<html>
    <head>
        <script>
            // the SignIn form will inherit VirtualElement
            function SignIn() {
                this.username = '';
                this.password = '';

                // use Object.observe to observe the object
                this.observe();

                this.find('#inp1').val(this.username);
                this.find('#inp2').val(this.password);
                this.find('#btn1').click(this.signIn);

                // set the name of the custom element
                super('SignIn');
            }

            SignIn.prototype.signIn = function () {
                if (this.username == 'admin' && this.password == 'admin') {
                    alert('login successful');
                } else {
                    alert('username or password was incorrect try with admin admin');
                }
            };
        </script>
    </head>
    <body>
        <h1>Hello Componenets</h1>
        <form>
            <h1>Sign In</h1>
            <input id="inp1" placeholder="Enter your username">
            <input id="inp2" placeholder="Enter your password">
            <button id="btn1">Sign in</button>
        </form>
    </body>
</html>

Prototyping

Prototyping is overlooked by everyone. A language/platform should allow quick creation of prototypes for testing, showcase and brainstorming scenarios.

<!doctype html>
<html> {
    <body> {
        <ul> {
            <!-- DUMMY is a reserved word which could be used to generate random data for prototyping purposes -->
            this.each(DUMMY);

            <li>My name is ${firstName} ${lastName} and I am ${age} years old.</li>
        }
    }
}
<!doctype html>
<html>
    <body>
        <ul>
            <li>My name is Antonio Stoilkov and I am 23 years old.</li>
            <li>My name is John Doe and I am 41 years old.</li>
            <li>My name is Maria Johnes and I am 27 years old.</li>
            <li>My name is Andrew Fuller and I am 18 years old.</li>
            <li>My name is Robert King and I am 62 years old.</li>
            <li>My name is Laura White and I am 33 years old.</li>
            <li>My name is Anne Peacock and I am 55 years old.</li>
            <li>My name is Michael Leverling and I am 24 years old.</li>
            <li>My name is Nancy Callahan and I am 16 years old.</li>
            <li>My name is Janet Dodsworth and I am 49 years old.</li>
        </ul>
    </body>
</html>

Why OneScript?

Coming soon...

Documentation