• Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Transform choo, yo-yo or bel template strings into pure and fast document calls

yo-yoify

NPM version build status build status Downloads js-standard-style

Transform choo, yo-yo, or bel template strings into pure and fast document calls.

install

npm install yo-yoify --save-dev

usage

When using Browserify, use as a global transform:

browserify entry.js -g yo-yoify -o bundle.js

how this works

yo-yo and bel, without this transform, pass template literals to hyperx. hyperx then parses and extracts the tags. bel then turns those tags into calls to document.createElement().

When using this transform, your template literals:

var msg = 'hello!'
var element = yo`<div>${msg}</div>`

Transform into direct calls to the document:

var msg = 'hello!'
var element = (function () {
  var bel0 = document.createElement("div")
  appendChild(bel0, [arguments[0]])
  return bel0
}(msg))

Which means, way better performance and compatibility with older browsers.

see also

  • babel-plugin-yo-yoify — yo-yoify as a Babel transform, works with any build setup that supports Babel

license

(c) 2016 Kyle Robinson Young. MIT License

More Repositories

1

webpack-stream

🍹 Run webpack through a stream interface
JavaScript
1,392
star
2

gaze

🔮 A globbing fs.watch wrapper built from the best parts of other fine watch libs.
JavaScript
1,155
star
3

letswritecode

🎓 code examples for Let's Write Code
JavaScript
792
star
4

napa

🍷 A helper for installing stuff without a package.json with npm.
JavaScript
412
star
5

grunt-hub

🐗 A Grunt task to watch and run tasks on multiple Grunt projects
JavaScript
194
star
6

nodewebkit

💻 An installer for node-webkit
JavaScript
152
star
7

on-load

On load/unload events for DOM elements using a MutationObserver
JavaScript
113
star
8

workerify

Transform web workers into browserified inline Blobs with browserify.
JavaScript
113
star
9

voxel-drone

🎲🚁 An AR Drone simulator in voxeljs.com
JavaScript
99
star
10

base-element

🔰 An element authoring library for creating standalone and performant elements.
JavaScript
81
star
11

testron

🔌 CI your client side tests with Electron
JavaScript
71
star
12

es6-loader

ES6 module loader for webpack
JavaScript
61
star
13

grunt-benchmark

🐗⌚ Grunt task for benchmarking
JavaScript
60
star
14

atlaspack

🌌 Pack images into a texture atlas.
JavaScript
50
star
15

csv-viewer

A WIP CSV viewer element.
JavaScript
49
star
16

vinyl-named

💽 Give vinyl files arbitrary names.
JavaScript
46
star
17

fs-explorer

A WIP file system explorer element.
JavaScript
44
star
18

grunt-beep

🐗💥 It beeps. What more do you need?
JavaScript
37
star
19

posix-tools

🔧 A collection of pure JavaScript POSIX-like tools
JavaScript
36
star
20

grunt-ejs

A grunt task for rendering ejs templates.
JavaScript
31
star
21

ember-webpack-resolver

An Ember resolver for use with webpack
JavaScript
31
star
22

grunt-gulp

Run gulp tasks through declarative Grunt config
JavaScript
31
star
23

voxel-sky

🎲🌕☀️ A sky for voxeljs.com
JavaScript
26
star
24

view-list

📜 An infinite scrolling list view element built on a virtual DOM.
JavaScript
24
star
25

voxel-snow

🎲❄️ Let it voxel.js snow!
JavaScript
24
star
26

voxel-texture

🎲🌅 A texture helper for http://voxeljs.com.
JavaScript
24
star
27

cakebox

A Dropbox API Plugin for CakePHP 2.x
PHP
23
star
28

grunt-docs

A grunt plugin to compile using DocPad.
JavaScript
23
star
29

webpackify

Use webpack through a Browserify plugin
JavaScript
22
star
30

resize-event

Detect resize on an element without polling or iframes
JavaScript
22
star
31

base-router

🚉 A simple and portable router for the client and server.
JavaScript
21
star
32

modal-element

🔲 A basic modal element built on a virtual DOM.
JavaScript
21
star
33

navelgazer

🍊🔮 A super fast, light weight, simple file watcher and platform layer for gaze.
C++
21
star
34

voxel-virus

🎲👾 Spread a virus in voxel.js
JavaScript
20
star
35

grunt-spell

🐗🔤 A Grunt plugin for spellchecking
JavaScript
20
star
36

level-rest

📊💤 A REST adapter for LevelUP
JavaScript
20
star
37

tune

🎶 Tune up baudio
JavaScript
20
star
38

userhome

🏠 A platform independent path to the user's home.
JavaScript
19
star
39

timecat.us

⏰🐱 time cat - everyone's favorite game
JavaScript
19
star
40

browser-module-cache

Caches browserify-cdn modules using level.js
JavaScript
18
star
41

voxel-critter

🎲🐀 Make your voxelbuilder.com critter come to life!
JavaScript
17
star
42

dontkry.com

⛔😢 My website
JavaScript
16
star
43

craft

🔨 An HTML5 crafting API.
JavaScript
16
star
44

scriptify

📃 Browserify inline script tags in HTML
JavaScript
16
star
45

ndthree

The unholy union of three.js and Mikola Lysenko's ndarrays.
JavaScript
15
star
46

voxel-share

Take a snapshot of voxel.js and share on imgur/twitter
JavaScript
14
star
47

animate-styles

Composable CSS Animations Built On animate.css
JavaScript
14
star
48

tic

⌛ setInterval/setTimeout using a delta tick. Useful for timing things with games.
JavaScript
14
star
49

voxel-avatar

Overlay an image or video on a minecraft skin in voxel.js
JavaScript
12
star
50

grunt-minjson

A Grunt plugin for minifying json files.
JavaScript
11
star
51

whatever_modules

❓ Finally! We can rename the `node_modules` folder to whatever we want. The tyranny is over! Now we can put whatever modules we want in there! Wooo!
JavaScript
11
star
52

CakePHP-Wordpress-Component

THIS REPOSITORY IS DEPRECATED
PHP
11
star
53

voxel-portal-gun

A portal gun in voxel.js
JavaScript
11
star
54

first-person-camera

A generic first person camera for WebGL.
JavaScript
10
star
55

blaster

🔫 A router for generating a static site that can turn into a single page app
JavaScript
10
star
56

attach-css

💅 Localizes CSS based on a virtual DOM tree.
JavaScript
10
star
57

computed-proxy

Computed properties with JavaScript Proxy
JavaScript
10
star
58

jmpress.js

This repo has moved! The repo you are looking for is now at jmpressjs/jmpress.js.
10
star
59

dtype

Return a data type from a string representing the type
JavaScript
9
star
60

button-styles

Modular CSS button styles
JavaScript
9
star
61

voxel-clouds

🎲☁️ Clouds for voxel.js
JavaScript
9
star
62

oven

A CakePHP 2 Re-Baker and CMS Plugin / BETA
PHP
9
star
63

voxel-trajectory

Calculate trajectories in voxel.js
JavaScript
9
star
64

grunt-jam

A Grunt task for compiling Jam packages
JavaScript
8
star
65

voxel-throw

Pick up and throw voxels in voxel.js
JavaScript
8
star
66

ember-templates-loader

Load templates into Ember with webpack.
JavaScript
8
star
67

freshcake

FreshBooks API Wrapper for CakePHP
PHP
8
star
68

cake-grunt-compass

An example CakePHP app that uses Grunt, Compass and JamJS.
JavaScript
8
star
69

grunt-openport

A grunt plugin to find open ports
JavaScript
8
star
70

filepicker-element

An button for opening the file picker dialog and returning the files picked.
JavaScript
8
star
71

locastore

👝 A localStorage wrapper that falls back to memory in private browsing mode.
JavaScript
7
star
72

voxel-ssao

Experimental SSAO for voxel.js
JavaScript
6
star
73

voxel-tile

Load google map or open street map tiles into http://voxeljs.com.
JavaScript
6
star
74

voxel-infinite

A WIP infinite voxel world generator
JavaScript
5
star
75

grunt-net

Run grunt tasks over a network using dnode.
JavaScript
5
star
76

voxel-debug

Debug helpers for voxel.js
JavaScript
5
star
77

voxel-camera

A video camera for voxeljs.com
JavaScript
5
star
78

webpack-yo-yo

An example using yo-yo with webpack
JavaScript
5
star
79

gruntfile

Gruntfile helper for making modular gruntfiles.
JavaScript
5
star
80

flatearth

Flatten all your nested deps just like the earth.
JavaScript
5
star
81

CakePHP-Dropbox-Component

THIS REPOSITORY IS DEPRECATED
PHP
4
star
82

drone-hud

A WIP HUD for drone-video (https://github.com/TooTallNate/node-drone-video)
JavaScript
4
star
83

twitterbootcake

Twitter Bootstrap CakePHP Admin Theme
PHP
4
star
84

leveler

A streaming stat leveling API.
JavaScript
4
star
85

dom-tilemap

Render a tilemap from a ndarray to the DOM.
JavaScript
4
star
86

eatcake

A convenient way to install CakePHP with Composer.
PHP
4
star
87

willitmerge

A command line tool to check if pull requests are mergeable.
JavaScript
4
star
88

gamescript

an event based game engine
JavaScript
4
star
89

grunt-step

🐗🐾 Add confirmation steps to your Grunt flow.
JavaScript
4
star
90

grunt-required

A Grunt task for detecting required modules and option to automatically install with npm.
JavaScript
4
star
91

base-svg-element

A layer on base-element for SVG elements.
JavaScript
3
star
92

cruveejs

cruveejs: A Cruvee API Wrapper for NodeJS
JavaScript
3
star
93

shama

Things for helping me build other things.
JavaScript
3
star
94

grunt-willitmerge

A Grunt plugin to check if open Github pull requests can be merged.
JavaScript
3
star
95

checkbox-element

☑️ A basic checkbox element built on a virtual DOM.
JavaScript
3
star
96

beep_game

JavaScript
3
star
97

voxel-settings

voxel.js setting config for cettings
JavaScript
3
star
98

metamorph

Morphs package meta files into each other.
JavaScript
3
star
99

grunt-prompts

Built-in prompts for a grunt style generator.
JavaScript
3
star
100

browser-test-helpers

A small set of generic test helpers for browser interaction tests.
JavaScript
3
star