| <!DOCTYPE html><html lang="en"><head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta property="og:url" content="https://yarnpkg.com/en/package/vue-instantsearch"> | |
| <meta property="og:site_name" content="Yarn"> | |
| <meta property="og:title" content="vue-instantsearch"> | |
| <meta property="og:image" content="https://yarnpkg.com/assets/og_image.png"> | |
| <meta property="og:description" content="👀 Lightning-fast Algolia search for Vue apps"> |
While making a library, I find it useful to write css in template strings to add as content to a style tag. This however means that when I add whitespace, it's going to be outputted in the library 🤔. What if Babel could minify that css while still allowing the expressivity of template strings?
I have the feeling that something like this is possible with babel-plugin-preval, but I'm not too sure how to do it without outputting the whole string that's generated
| { | |
| "results": [ | |
| { | |
| "hits": [ | |
| { | |
| "start": 0, | |
| "text": "", | |
| "id": "B-r3Wf_I2Lk", | |
| "title": "Things I learned teaching Go", | |
| "description": "Filmed at http://dotgo.io in Paris on October 10, 2014. More talks at http://dotconferences.io\n\nFrancesc is a member of the Go team", |
| <template> | |
| <div id="app" class="container-fluid"> | |
| <ais-index :searchStore="searchStore" :queryParameters="{clickAnalytics: true}"> | |
| <div class="row"> | |
| <div class="col-md-2 col-sm-3"> | |
| <h1 class="head-title"> | |
| Demo Store | |
| </h1> | |
| </div> | |
| <div class="col-md-10 col-sm-9"> |
| /** | |
| * Check whether a number is a multiple of a second | |
| * | |
| * @param {number} num the number to check | |
| * @param {number} divisor the number over which it's dividable | |
| */ | |
| const isDivisible = (num, divisor) => num % divisor === 0; | |
| /** | |
| * Get the value (fizz, buzz, fizzbuzz, {number}) for a specific number |
| /*! | |
| * autocomplete.js UNRELEASED | |
| * https://github.com/algolia/autocomplete.js | |
| * Copyright 2018 Algolia, Inc. and other contributors; Licensed MIT | |
| */ | |
| !function(a,b){"object"==typeof exports&&"object"==typeof module?module.exports=b():"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?exports.autocomplete=b():a.autocomplete=b()}(this,function(){return function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={exports:{},id:d,loaded:!1};return a[d].call(e.exports,e,e.exports,b),e.loaded=!0,e.exports}var c={};return b.m=a,b.c=c,b.p="",b(0)}([function(a,b,c){"use strict";a.exports=c(1)},function(a,b,c){"use strict";function d(a,b,c,d){c=f.isArray(c)?c:[].slice.call(arguments,2);var j=e(a).each(function(a,f){var j=e(f),k=new i({el:j}),l=d||new h({input:j,eventBus:k,dropdownMenuContainer:b.dropdownMenuContainer,hint:void 0===b.hint||!!b.hint,minLength:b.minLength,autoselect:b.autoselect,autoselectOnBlur:b.autoselectOnBlur,openOnFocus:b.openOnFocus,templates:b.templates,debug:b.deb |
| solution | |
| !solution/README.md |
| function jsonToBabel(value, t) { | |
| if (Array.isArray(value)) { | |
| return t.arrayExpression(value.map(_value => jsonToBabel(_value, t))); | |
| } | |
| if (value === null) { | |
| return t.identifier('null'); | |
| } | |
| switch (typeof value) { | |
| case 'object': { | |
| return t.objectExpression( |
There's been another mention of InstantSearch.js being "unsafe" (it uses new Function) instantsearch.js#3524 and instantsearch.js#2868, so I looked around to alternatives for Hogan (the templating engine).
I found these templating engines. So far I'm not sold on a single one, but here are all of them, grouped per type.
These are all returning either DOM nodes that can be used with appendChild, or render directly into a node. Here we need to check to make sure they are (or need to be) Node-compatible (most are).
| function getHierarchicalRefinement(state, attributeName, name, resultsFacets) { | |
| var facet = find(resultsFacets, {name: attributeName}); | |
| var facetDeclaration = state.getHierarchicalFacetByName(attributeName); | |
| var splitted = name.split(facetDeclaration.separator); | |
| var configuredName = splitted[splitted.length - 1]; | |
| for (var i = 0; facet !== undefined && i < splitted.length; ++i) { | |
| facet = find(facet.data, {name: splitted[i]}); | |
| } |