npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grig

v0.2.3

Published

a lightweight nested messages i18n library with smart ts prompt can be used in react , vue , svelte , solid , etc...

Downloads

9

Readme

English|中文|Demos|示例

grig

a lightweight and easy-to-use i18n library, with TS smart prompts. Can be used in react、vue3、svelte、solid ... 截图

Use as a formatter

import { grig } from "grig";
const message = {
    name: "姓名",
    form: { status: "状态" },
    welcome: "欢迎来到{city}!",
    own: (count: number) => `我有${count}个苹果`,
} as const;
const t = grig(message);
console.log(t("name")); // 姓名
console.log(t("form.status")); // 状态
console.log(t("welcome", { city: "上海" })); // 欢迎来到上海!
console.log(t("own", 2)); //我有2个苹果

React

1.Create a grig Instance
//./lang/init
import { createGrigReact } from "grig/react";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, useGrigContext, useMessages, GrigProvider,getLang } =
    createGrigReact({ lang: "zh", fallbackLang: "en" }, global_messages);
2.Use it anywhere
import { useState } from "react";
import { useMessages } from "../lang/init";
export function Content() {
    const t = useMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.Switch the lang
import { useGrigContext } from "../lang/init";
export default function SwitchLang() {
    const { lang, setLang } = useGrigContext();
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(lang === "en" ? "zh" : "en");
                }}
            >
                {lang} {t("lang")}
            </button>
        </div>
    );
}
4.Refresh DOM by Wrap App with GrigProvider
import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import { GrigProvider } from "./lang/init";

export function App() {
    return (
        <GrigProvider>
            <div className="app card">
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </GrigProvider>
    );
}

Vue3

1.Create a grig Instance
//./lang/init
import { createGrigVue } from "grig/vue";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang } = createGrigVue(
    { lang: "zh", fallbackLang: "en" },
    global_messages
);
2.Use it anywhere
<template>
    <div className="content card">
        <div>child: Content.tsx</div>
        <span>{{ t("g_welcome") }}</span>
        <span>{{ t("world") }}</span>
    </div>
</template>
<script setup lang="ts">
    import { tMessages } from "../lang/init";
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
</script>

3.Switch the lang
<template>
    <div class="lang-switch card">
        <div>child: langSwitch.vue</div>
        <button @click="handleToggle">{{ t("lang") }} {{ lang }}</button>
    </div>
</template>
<script setup lang="ts">
import { lang, tMessages } from "../lang";

const handleToggle = () => {
    if (lang.value == "zh") {
        lang.value = "en";
    } else {
        lang.value = "zh";
    }
};
const t = tMessages({
    zh: {
        lang: "中文",
    },
    en: {
        lang: "English",
    },
});
</script>

Svelte

1.Create a grig Instance
//./lang/init
import { createGrigSvelte } from "grig/svelte";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang} = 
createGrigSvelte({ lang: "zh", fallbackLang: "en" }, global_messages);
2.Use it anywhere

<script  lang="ts">
    import { tMessages } from "../lang/init";
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
</script>
  <div className="content card">
        <div>child: Content.tsx</div>
        <span>{{ $t("g_welcome") }}</span>
        <span>{{ $t("world") }}</span>
    </div>
3.Switch the lang
<script lang="ts">
    import { tMessages, lang } from "../lang/init";
    const t = tMessages({  zh: { lang: "中文", },
     en: { lang: "English", },
    });
  </script>
  
  <div class="lang-switch card">
    <div>child: SwitchLang.svelte</div>
    <button
        on:click={() => {
            lang.update(_lang=>(_lang=== "en" ? "zh" : "en"));
        }}
    >
        {$lang} {$t("lang")}
    </button>
</div>
  
</script>

Solid

1.Create a grig Instance
//./lang/init
import { createGrigSolid } from "grig/solid";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang,setLang } = createGrigSolid({ lang: "zh", fallbackLang: "en" }, global_messages);
2.Use it anywhere
import { tMessages } from "../lang/init";
export function Content() {
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.Switch the lang
import { lang, setLang, tMessages } from "../lang/init";

const SwitchLang = () => {
  const t = tMessages({
    zh: {
      lang: "中文",
    },
    en: {
      lang: "English",
    },
  });
  return (
    <div class="lang-switch card">
      <div>child: SwitchLang.tsx</div>
      <button
        onClick={() => {
          setLang(lang() === "en" ? "zh" : "en");
        }}
      >
        {lang()} {t("lang")}
      </button>
    </div>
  );
};

General Instance Usage

1.Create a grig Instance
//./lang/init
import { createGrig } from "grig";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const {
    tMessages,
    addLangChangeCallback,
    removeLangChangeCallback,
    getLang,
    setLang,
} = createGrig({ lang: "zh", fallbackLang: "en" }, global_messages);
2.Use it anywhere
import { useState } from "react";
import { tMessages } from "../lang/init";
export function Content() {
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.Switch the lang
import { getLang, setLang, tMessages } from "../lang/init";
export default function SwitchLang() {
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(getLang() === "en" ? "zh" : "en");
                }}
            >
                {getLang()} {t("lang")}
            </button>
        </div>
    );
}
4.Refresh DOM by key
import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import {
    addLangChangeCallback,
    getLang,
    removeLangChangeCallback,
} from "./lang/init";

export function App() {
    const [lang, setLang] = useState(getLang());
    useEffect(() => {
        addLangChangeCallback("langChange", (_lang) => {
            setLang(_lang);
        });
        return () => {
            removeLangChangeCallback("langChange");
        };
    }, []);

    return (
        <>
            <div className="app card" key={lang}>
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </>
    );
}

Demos

npx degit https://github.com/leafio/grig/examples grig-examples

Installation

npm install grig

Support Me

If you like this library , you can give a start on github. Email: [email protected]

I'm looking for a frontend job in Shanghai , hope someone could find a offer for me.

English|中文|Demos|示例

grig

轻量易用的 i18n 库,含 TS 智能提示。 可在 react、vue3、svelte、solid等多种框架内使用。 截图

直接使用

import { grig } from "grig";
const message = {
    name: "姓名",
    form: { status: "状态" },
    welcome: "欢迎来到{city}!",
    own: (count: number) => `我有${count}个苹果`,
} as const;
const t = grig(message);
console.log(t("name")); // 姓名
console.log(t("form.status")); // 状态
console.log(t("welcome", { city: "上海" })); // 欢迎来到上海!
console.log(t("own", 2)); //我有2个苹果

React

1.创建grig实例
//./lang/init
import { createGrigReact } from "grig/react";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, useGrigContext, useMessages, GrigProvider,getLang } =
    createGrigReact({ lang: "zh", fallbackLang: "en" }, global_messages);
2.在任意组件内使用
import { useState } from "react";
import { useMessages } from "../lang/init";
export function Content() {
    const t = useMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.切换语言
import { useGrigContext } from "../lang/init";
export default function SwitchLang() {
    const { lang, setLang } = useGrigContext();
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(lang === "en" ? "zh" : "en");
                }}
            >
                {lang} {t("lang")}
            </button>
        </div>
    );
}
4.用GrigProvider包裹App刷新DOM
import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import { GrigProvider } from "./lang/init";

export function App() {
    return (
        <GrigProvider>
            <div className="app card">
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </GrigProvider>
    );
}

Vue3

1.创建grig实例
//./lang/init
import { createGrigVue } from "grig/vue";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang } = createGrigVue(
    { lang: "zh", fallbackLang: "en" },
    global_messages
);
2.在任意组件内使用
<template>
    <div className="content card">
        <div>child: Content.tsx</div>
        <span>{{ t("g_welcome") }}</span>
        <span>{{ t("world") }}</span>
    </div>
</template>
<script setup lang="ts">
    import { tMessages } from "../lang/init";
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
</script>

3.切换语言
<template>
    <div class="lang-switch card">
        <div>child: langSwitch.vue</div>
        <button @click="handleToggle">{{ t("lang") }} {{ lang }}</button>
    </div>
</template>
<script setup lang="ts">
import { lang, tMessages } from "../lang";

const handleToggle = () => {
    if (lang.value == "zh") {
        lang.value = "en";
    } else {
        lang.value = "zh";
    }
};
const t = tMessages({
    zh: {
        lang: "中文",
    },
    en: {
        lang: "English",
    },
});
</script>

Svelte

1.创建grig实例
//./lang/init
import { createGrigSvelte } from "grig/svelte";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang} = 
createGrigSvelte({ lang: "zh", fallbackLang: "en" }, global_messages);
2.在任意组件内使用

<script  lang="ts">
    import { tMessages } from "../lang/init";
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
</script>
  <div className="content card">
        <div>child: Content.tsx</div>
        <span>{{ $t("g_welcome") }}</span>
        <span>{{ $t("world") }}</span>
    </div>
3.切换语言
<script lang="ts">
    import { tMessages, lang } from "../lang/init";
    const t = tMessages({  zh: { lang: "中文", },
     en: { lang: "English", },
    });
  </script>
  
  <div class="lang-switch card">
    <div>child: SwitchLang.svelte</div>
    <button
        on:click={() => {
            lang.update(_lang=>(_lang=== "en" ? "zh" : "en"));
        }}
    >
        {$lang} {$t("lang")}
    </button>
</div>
  
</script>

Solid

1.创建grig实例
//./lang/init
import { createGrigSolid } from "grig/solid";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang,setLang } = createGrigSolid({ lang: "zh", fallbackLang: "en" }, global_messages);
2.在任意组件内使用
import { tMessages } from "../lang/init";
export function Content() {
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.切换语言
import { lang, setLang, tMessages } from "../lang/init";

const SwitchLang = () => {
  const t = tMessages({
    zh: {
      lang: "中文",
    },
    en: {
      lang: "English",
    },
  });
  return (
    <div class="lang-switch card">
      <div>child: SwitchLang.tsx</div>
      <button
        onClick={() => {
          setLang(lang() === "en" ? "zh" : "en");
        }}
      >
        {lang()} {t("lang")}
      </button>
    </div>
  );
};

通用用法

1.创建实例
//./lang/init
import { createGrig } from "grig";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const {
    tMessages,
    addLangChangeCallback,
    removeLangChangeCallback,
    getLang,
    setLang,
} = createGrig({ lang: "zh", fallbackLang: "en" }, global_messages);
2.在任意组件内使用
import { useState } from "react";
import { tMessages } from "../lang/init";
export function Content() {
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}
3.切换语言
import { getLang, setLang, tMessages } from "../lang/init";
export default function SwitchLang() {
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(getLang() === "en" ? "zh" : "en");
                }}
            >
                {getLang()} {t("lang")}
            </button>
        </div>
    );
}
4.通过key刷新DOM
import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import {
    addLangChangeCallback,
    getLang,
    removeLangChangeCallback,
} from "./lang/init";

export function App() {
    const [lang, setLang] = useState(getLang());
    useEffect(() => {
        addLangChangeCallback("langChange", (_lang) => {
            setLang(_lang);
        });
        return () => {
            removeLangChangeCallback("langChange");
        };
    }, []);

    return (
        <>
            <div className="app card" key={lang}>
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </>
    );
}

示例

npx degit https://github.com/leafio/grig/examples grig-examples

安装

npm install grig

支持一下

喜欢grig的话 , 在github上给个 star 吧. Email: [email protected]

我目前在找前端的工作,位置上海。有岗位机会的话,可以联系我。