Giter VIP home page Giter VIP logo

html-element's Introduction

HtmlElement

Latest Version on Packagist Tests GitHub Code Style Action Status Total Downloads

HtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on Hyperscript, and adds some Emmet-style syntactic sugar too.

Elements are rendered using the static HtmlElement::render method (which I recommend wrapping in a plain function for readability).

el('div.container > div.row > div.col-md-6',
    el('a', ['href' => '#'], 'Hello world!')
);
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="#">Hello world!</a>
    </div>
  </div>
</div>

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Postcardware

You're free to use this package (it's MIT-licensed), but if it makes it to your production environment you are required to send us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.

The best postcards will get published on the open source page on our website.

Usage

I recommend adding an el function to your application to improve readability over the static method.

function el(string $tag, $attributes = null, $content = null) : string
{
    return \Spatie\HtmlElement\HtmlElement::render(...func_get_args());
}

Examples

An empty tag:

el('div');
<div></div>

A plain tag with text contents:

el('p', 'Hello world!');
<p>Hello world!</p>

A tag with an attribute:

el('p', ['style' => 'color: red;'], 'Hello world!');
<p style="color: red;">Hello world!</p>

A tag with an ID set emmet-style:

el('p#introduction', 'Hello world!');
<p id="introduction">Hello world!</p>

A tag with an emmet-style ID and class:

el('p#introduction.red', 'Hello world!');
<p id="introduction" class="red">Hello world!</p>

A tag with emmet-style attributes:

el('a[href=#][title=Back to top]', 'Back to top');
<a href="#" title="Back to top">Back to top</a>

A more complex emmet-style abbreviation:

el('div.container > div.row > div.col-md-6', 'Hello world!');
<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

Limited support of implicit tag names (divs only):

el('.container > .row > .col-md-6', 'Hello world!');
<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

Manually nested tags:

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);
<div class="container">
  <nav aria-role="navigation">...</nav>
</div>

Multiple children:

el('ul', [el('li'), el('li')]);
<ul>
  <li></li>
  <li></li>
</ul>

Self-closing tags:

el('img[src=/background.jpg]');
<img src="background.jpg">
el('img', ['src' => '/background.jpg'], '');
<img src="background.jpg">

Arguments

The el function behaves differently depending on how many arguments are passed in.

el(string $tag) : string

When one argument is passed, only a tag will be rendered.

el('p');
<p></p>

el(string $tag, string|array $contents) : string

When two arguments are passed, they represent a tag and it's contents.

String example:

el('p', 'Hello world!');
<p>Hello world!</p>

Array example:

el('ul', [el('li'), el('li')]);
<ul>
  <li></li>
  <li></li>
</ul>

el(string $tag, array $attributes, string|array $contents) : string

When three arguments are passed, the first will be the tag name, the second an array of attributes, and the third a string or an array of contents.

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);
<div>
  <nav aria-role="navigation">...</nav>
</div>

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you've found a bug regarding security please mail [email protected] instead of using the issue tracker.

Credits

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

html-element's People

Contributors

adrianmrn avatar carusogabriel avatar devsrv avatar freekmurze avatar mradhi avatar nook-ru avatar osbre avatar patinthehat avatar peter279k avatar sebastiandedeyne avatar tjoosten avatar yutv 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html-element's Issues

PHP 5.0

Is it possible that the library supports PHP5.0?

[BUG] Script tag not working as expected

In raising this issue, I confirm the following (please check boxes):

  • I have read and understood the contributors guide.
  • I have checked the pull requests tab for existing solutions/implementations to my issue/suggestion.
  • I have checked that the bug-fix I am reporting can be replicated.

Description of the problem

I'm aware that this library is under no active development, yet I wanted tp post a bug I have come across.

Creating <script> does not work as desired. I came across this by pure chance and first suspected that this library only allows certain attributes. Later I figured that creating even the simplest <script> does not work.

Steps to reproduce

Example script:

$attributes = [
	'src'   => 'https://url.to/script.js',
    'defer' => 'defer'
];

el('script', $attributes, null);

// => string(46) "<script>https://url.to/script.jsdefer</script>"

Expected result:

string(60) "<script src="https://url.to/script.js defer="defer"></script>"

I have noticed that the syntax for self-closing tags is working as expected, except that <script> isn't self-closing

el('script[src=https://url.to/script.js][defer="defer"]');

// => string(62) "<script src="https://url.to/script.js" defer="defer"></script>"

**[PROPOSAL]** Escaping

In raising this issue, I confirm the following (please check boxes):

  • I have read and understood the contributors guide.
  • I have checked the pull requests tab for existing solutions/implementations to my issue/suggestion.
  • I have checked that the bug-fix I am reporting can be replicated.

Description of the problem

One of the important reasons for using hyperscript is that it handles escaping of characters which are reserved in html. Which prevents XSS.

spatie/html-element does not do this. Mainly because it uses strings as intermediate format instead of an object representation of the DOM.

[QUESTION] Performance

I was wondering, to which extent does this way affect the performance and loading of the page in comparison to plain html. Although I suppose caching would level this out.

**[BUG]** Value "0" is ignored in rendered HTML Tag Attributes

Hello,

In raising this issue, I confirm the following (please check boxes):

  • I have read and understood the contributors guide.
  • I have checked the pull requests tab for existing solutions/implementations to my issue/suggestion.
  • I have checked that the bug-fix I am reporting can be replicated.

I am trying to render a HTML SELECT OPTION tag programmatically. As it turns out, the value "0" is ignored when used as an attribute value, as shown here:

$attr = ['name'=>'foo', 'value'=>'0', 'label'=>'Foo'];
echo el('option', $attr, $attr['label']);
// Observed output: <option name="foo" value label="Foo">Foo</option>
// Expected output: <option name="foo" value="0" label="Foo">Foo</option>

It most likely happens because the value "0" is treated as empty (both the string "0" and the number 0).

Here is also a working example:

$attr = ['name'=>'foo', 'value'=>'1', 'label'=>'Foo'];
echo el('option', $attr, $attr['label']);
// Works fine, the observed and expected output is: <option name="foo" value="1" label="Foo">Foo</option>

How do I get the expected output when using value=0?

Steps to reproduce

Full code to recreate:

<?php
require './html-element/html-element.php';

$attr = ['name'=>'foo', 'value'=>'0', 'label'=>'Foo'];
echo el('option', $attr, $attr['label']);
// Observed output: <option name="foo" value label="Foo">Foo</option>
// Expected output: <option name="foo" value="0" label="Foo">Foo</option>

el() is defined this way:

require 'src/HtmlElement.php';
require 'src/Attributes.php';
require 'src/AbbreviationParser.php';
require 'src/TagRenderer.php';
require 'src/Helpers/Arr.php';

function el(string $tag, $attributes = null, $content = null) : string {
	return \Spatie\HtmlElement\HtmlElement::render(...func_get_args());
}

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.