Upgrade to Pro — share decks privately, control downloads, hide ads and more …

どこでも動かすために… TypeScriptでライブラリ開発の すゝめ

jiko21
March 02, 2023

どこでも動かすために… TypeScriptでライブラリ開発の すゝめ

「MixLeap Study #70 - 教えて!みんなのTypeScript」のLT資料です
https://yahoo-osaka.connpass.com/event/274722/

jiko21

March 02, 2023
Tweet

More Decks by jiko21

Other Decks in Technology

Transcript

  1. খౡ େج (Daiki Kojima) Multistack Engineer @ AppBrew, inc. Love:

    Guitar, TypeScript ڈ೥େࡕʹҠॅ͖ͯ͠·ͨ͠ Twitter: @jiko_21 GitHub: @jiko21
  2. ϒϥ΢βͰ΋ಈ͘͠… import { useMemo, useState } from 'react' import {

    createFlavMd } from 'flav-md'; function App() { const [text, setText] = useState(''); const flavMd = useMemo(() => createFlavMd(), []); const renderedText = useMemo(() => flavMd.readMdText(text).build(), [text]); return ( <div className="App"> <textarea value={text} onChange={(e) => setText(e.target.value)} /> <div dangerouslySetInnerHTML={{__html: renderedText }} /> </div> ) } export default App
  3. Node.jsͰ΋ಈ͘ const flavmd = require('flav-md'); const result = flavmd .createFlavMd()

    .readMdText('# hogehoge') .readCssText('.flav-md-h1 {color: red;}') .build(); console.log(result);
  4. No

  5. DenoͰ΋ಈ͖·͢! import { serve } from "https://deno.land/x/sift/mod.ts"; import flavMd from

    'https://cdn.skypack.dev/flav-md'; async function blogPage(date: string) { const md = await getBlogData(date); const result = flavMd.createFlavMd() .readMdText(md) .readCssText('.flav-md-h1 {color: red;}') .build(); return `<html> <head> <title>blog page</title> </head> <body> ${result} </body> </html>`; } serve({ "/blog/:date": async (request, {date}) => { if (!date.match(/^\d{4}-\d{2}-\d{2}$/)) { return Response.error(); } const post = await blogPage(date); return new Response(post, {headers: { "content-type": "text-html; charset=UTF-8" }}) }, });
  6. ಈ͖·͢ʂ import flavMd from 'flav-md'; const text = flavMd.createFlavMd() .readMdText('#

    test') .readCssText('.flav-md-h1 {color: red;}') .build(); console.log(text);