From 99f0f73fec0a7333d5d34245ea5303768db5cca4 Mon Sep 17 00:00:00 2001 From: Matt Seeley Date: Mon, 13 Apr 2020 23:10:17 -1000 Subject: [PATCH] feat(html): support custom meta element creation This allows for convenient creation of `meta` elements without reimplementing all template function responsibilities. --- packages/html/README.md | 9 ++++++++- packages/html/lib/index.js | 21 +++++++++++++++++---- packages/html/test/snapshots/test.js.md | 1 + packages/html/test/snapshots/test.js.snap | Bin 1505 -> 1558 bytes packages/html/test/test.js | 6 +++++- 5 files changed, 31 insertions(+), 6 deletions(-) diff --git a/packages/html/README.md b/packages/html/README.md index 7f9d0029f..b7f55caa6 100644 --- a/packages/html/README.md +++ b/packages/html/README.md @@ -62,6 +62,13 @@ _Note: If using the `es` / `esm` output format, `{ type: 'module'}` is automatic Type: `String`
Default: `'index.html'` +### `meta` + +Type: `Array`
+Default: `[{ charset: 'utf-8' }]` + +Specifies attributes used to create `meta` elements. For each array member, provide an object with key-value pairs that represent meta element attribute names and values. + Specifies the name of the HTML to emit. ### `publicPath` @@ -95,7 +102,7 @@ By default this is handled internally and produces HTML in the following format: - + ${metas} ${title} ${links} diff --git a/packages/html/lib/index.js b/packages/html/lib/index.js index c85ba354e..b5e136d07 100644 --- a/packages/html/lib/index.js +++ b/packages/html/lib/index.js @@ -24,7 +24,7 @@ const makeHtmlAttributes = (attributes) => { return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), ''); }; -const defaultTemplate = async ({ attributes, files, publicPath, title }) => { +const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) => { const scripts = (files.js || []) .map(({ fileName }) => { const attrs = makeHtmlAttributes(attributes.script); @@ -39,11 +39,18 @@ const defaultTemplate = async ({ attributes, files, publicPath, title }) => { }) .join('\n'); + const metas = meta + .map((input) => { + const attrs = makeHtmlAttributes(input); + return ``; + }) + .join('\n'); + return ` - + ${metas} ${title} ${links} @@ -62,13 +69,19 @@ const defaults = { script: null }, fileName: 'index.html', + meta: [{ charset: 'utf-8' }], publicPath: '', template: defaultTemplate, title: 'Rollup Bundle' }; const html = (opts = {}) => { - const { attributes, fileName, publicPath, template, title } = Object.assign({}, defaults, opts); + const { attributes, fileName, meta, publicPath, template, title } = Object.assign( + {}, + defaults, + opts + ); + return { name: 'html', @@ -88,7 +101,7 @@ const html = (opts = {}) => { } const files = getFiles(bundle); - const source = await template({ attributes, bundle, files, publicPath, title }); + const source = await template({ attributes, bundle, files, meta, publicPath, title }); const htmlFile = { type: 'asset', diff --git a/packages/html/test/snapshots/test.js.md b/packages/html/test/snapshots/test.js.md index bbbf9f004..92e09ccb3 100644 --- a/packages/html/test/snapshots/test.js.md +++ b/packages/html/test/snapshots/test.js.md @@ -267,6 +267,7 @@ Generated by [AVA](https://ava.li). ␊ ␊ ␊ + ␊ Batcave␊ ␊ ␊ diff --git a/packages/html/test/snapshots/test.js.snap b/packages/html/test/snapshots/test.js.snap index f7873ad4e614eb463c0c76d8d0f56e965df4bd6c..c9eea875c1be2dbaaeec561726256d2da91b0579 100644 GIT binary patch literal 1558 zcmV+x2I=`hRzVI?9LWXQ(}-r ztpOCHMq^?q5tR@lCPG3;#4m`T@eh=!F%gx2ltdB@icy1aKkjIcj}uGUBE967oq7A- z?AtfL_hx4A96~69Hcx)6`Fu~BNn3ihu35e5V~m{NUjc-k{hGe`H$OBcw&h?%oO6y|>Li^7HeFS9`H5mCF$_ zzB%{FFX`EA9kfRlMo7`GWQ*E7zd}rbtd3Wz*t;58kaPiCZEMP*Q%C1VwIRPJ*1)?Y*Co>phHf&B z2)f3o25PFT$*Qf^Spu)n;$uVpg z+NAmuFa@$?Zt zs)9N=!p0k(jo$*oKFx}-Q3Mq@)}rSCi(uPp6mES(McEh;GPc&)cY;g3U|fl{qvkJK zvf{qAEi2pSwaqV3EK{jv@#(xS*Ge^N@{Edv*9cV&mL={p8;Kuw4&h3Sd%*WR>6pG8 zQbJ1?PoT;rZ7W+Bw69&&ysUjed+U{*3A}&|#ZJpwoil@tWJQJ&-DZZ(h@_h;&qz$@ zuwq2Eh^8|l$|gik$r8&poV_F!>q#>aY>VkCS;ydA6nL+7j=Ev$DLw_NCS7lX8E7ug z8Tn&du-_CETcnMITGIe3>_BCSP9wG|7AB16X8w)6Y=bE6y>yhuJI15Exewp%@3fp+ zl<&Cne`&Rn{%U=A9l8UqjevQ8#l^TCbQyhrp4(e|ZbS2s(+s$r{S}&j0CoUpj{;5= zr#V=nG5`l?14uDBIEHBfmA=4+JF?j4$pr?C4ZX`3NPoFY}bVuEp!v&Fz zrm~E-Q7z3ft|)}Zj?|Zt`Z7rMWlU&T)|bnE?}Gi1C8sqWQeW3NzubUu2Yce^G*(VXhtk@Pk`|uK8E%Cjh<0YtFl%@)6)9pd5tF8}}l literal 1505 zcmV<71s?iARzVVX=!5@nV00000000B+ znSX2)MHI(p?yl|Kmi~ZZl!!QNq<1CIVqyrCyJ9QYfTbWm1eFMTyR&!O?k{#{(bJR| zBvESsg{aY(7)nGX#K<3lF(l$Ih@goHO2n9m%3qR5qQPL$;M*T}l;g*VC2f&j^3Bf9 zzBl*w&1c^1-km`R#n6U{Pqm)w%`kam@1~V2)_;zX`}r$`(AMwh+kd0TvG&J**?-6J zO*dh$_iPzL=C?rTh(y!pM;2i}=n--W&2V`CAr zyI*js?-yq7`Y8Fxo(C3g!CvpmaR}{r`nl8Ju9&{|o^7WRYmON0*z1+XBP9QE%dLky z&UGBwyzj~RVQmlgdcT^0P#9Hs_lTo7JPnT1L3e}daQSFl)@oTo4&!{QrltmA4&e~O zl^EaWJ3?!nd&KS-WxJud7qkje_bg~T4#p~9nC_w?!=Xa6wzk%D*$*ZMKtF;;K~n2O zMK0kBU8)d{AY21Bp|LoOaM@@a5eIK6PPHh{cqU2j!i?0 z|5?x^;CXgw{8xfW8q@=N3-ocZ%hlnJ;}??2#V$rOaebgUQkJhdm*0TSfyR~QaypnK zLCZnwL9Y#vOMGJx_vtVuj<`Xkc+HR;l@1AiKZB|OqXWL$~bQF9k8TKeFs zwq>1jI_4G`R%q0=g-pSgZ>Ku71V$wy=!9w}%MtH8n@Ny%9^qs+0wZy;%Z?Mp zCc43hq*#zSHAig6Gz|-Gp^>x_(XpAKk<|?DMTPrX?V6jGkrvWmYSA?gxPj%8yi+i? zO%z>J9f>v*YEJ=aQ;4F-bP91asd&NoVHWP#Uu}@3-IvbNIM;c!KljmlgC{Mw78Ops z`MlnI-Db#R_IGIh3EBqC9s->xjX8Lt z3J?$K0LdlZ#lU49m}~&O4mt!nQS4Io|9yRnb{XB&8p16i<_93!myN(3186=KK2LKH z!*JN2P7db&lvEYHn`A92r}#qNc&H<4inm!#rFNE5=6_?!eJnroSFw#DJOPI%L=c(* zYKi2RNt+|f)N(fvZkeL98U9MIg_V9g8iVU51D=m663aG|JEu*XG>i0b-pt{m%yQ`* zqa9Swu&mb=!F40`Wu(3gQhgZ{8J6{>8egWq!1Iu;WOM5yTa-F}!elqOdVe?5H2CuLq|1n-C|FaByA>g=&eTz?JQWF#%hzkyWpU>JqQmxL6 H$R7Xz=ON;L diff --git a/packages/html/test/test.js b/packages/html/test/test.js index 1a8890679..ef11a9745 100644 --- a/packages/html/test/test.js +++ b/packages/html/test/test.js @@ -30,7 +30,11 @@ test.serial('options', async (t) => { html({ fileName: 'batman.html', publicPath: 'batcave/', - title: 'Batcave' + title: 'Batcave', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'minimum-scale=1, initial-scale=1, width=device-width' } + ] }) ] });