Hacktoberfest 2020のオープンソース


我々team 積極的にオープンソースの動きをサポートしていますが、残念ながら、OSSの新機能を実装するのに十分な時間がありません.それで、ハックトーフェストのようなイニシアティブは本当に我々の役に立つことができました.この記事では、私は最も顕著な問題を表示します.

コンフィギュレーション


react-figma 私たちの旗艦オープンソースプロジェクトは、これはFigmaに反応レンダラです.プロジェクトはすでにハックトーフェストに昨年参加し、新しい貢献を得た.があるcontribution guide それは新人に役立つかもしれません.

テキスト、色などのスタイルをサポート


Styles 機能は本当に役立つです.プロジェクトで積極的に使用します.

テストスタイル
フィガマAPI スタイルを作成するために、しかし、Figmaはそれを支持しません.もちろん、次のように書きます.
const style = figma.createTextStyle();
style.fontName = "Roboto";
style.fontSize = 16;
...
<Text textStyleId={style.id} />
...
しかし、このコードは反応するネイティブAPIと互換性がありません、そして、プラグインが再構築するならば、テキストスタイルは再作成されます.

Figmaにアクセスする方法getlocexstyles () 菅345年



tooppaaa
掲示される
こんにちは
この図書館のおかげで.
私は現在ロケールスタイルを使用してビルドする方法を検討しています

私は何とかアクセスしますfigma API コードから.TSと私のすべてのスタイルを作成します.
私は現在、成功せずに私のコンポーネントからそれらを再利用することを望んでいます.私は医者の何かを逃していますか?
const Palettes: React.FC<PalettesProps> = ({ ...props }) => {
  const theme = useTheme();
  const styles = figma.getLocalPaintStyles(); // throw figma is not defined at runtime
  return ...
}

If it's not available yet, happy to help through a PR with your guidance ;)

textstyleサポートの実装 菅344

ネイティブAPIのサポート

React Native compatibility is the one of the most useful features of react-figma. But we haven't implemented all RN APIs yet.
E.g

There are issues about it:

すべての反応ネイティブAPIのスタブ/ダミーAPIを作成する 菅322

エラー境界またはRedboxの実装

React supporst Error Boundaries components to allow debugging purposes. But React Figma doesn't have this out-of-the-box support:

エラー境界またはRedboxの実装。 菅83

Should introduce react Error Boundaries components to allow for debugging purposes.

Error Boundaries can have a back up render function that renders a Rectangle and Text component with the error and stack.

Reference: react-sketchapp RedBox component

レスポンスフェッチフック

react-fetch-hook is a React hook to use Fetch AP convenientlyI. There are some unclosed issues:

アボートフェッチ 菅25

Hi thank you for this great react fetch hook, Is there a way to make the fetch abortable and abort it when component is unmount ?

Thank you

高速要求でISLoad = false 菅24

braco posted on

If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.

In other words:

  1. Setup a series of fetches quickly as the user is typing
  2. When a new fetch is issued, cancel the previous fetches
  3. isLoading will === false even though current fetch is still open
  4. results will still correctly return

レンダーは、依存関係が変更されたときに3回トリガ 菅29

This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.

Expected:

  1. Change dependencies.
  2. Render with isLoading === true, data === null
  3. Render with isLoading === false, data === <new-result>

Actual:

  1. Change dependencies.
  2. Render with isLoading === false, data === <previous-result>
  3. Render with isLoading === true, data === <previous-result>
  4. Render with isLoading === false, data === <new-result>

I don't care so much about data containing the previous result, and changing just that to null with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true.

To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?

メディアフック

react-media-hook is a React Hook for Media Queries.

クエリ作成用のヘルパー

Helpers for creating queries could be a very useful feature. E.g. instead of

const isDark = useMediaPredicate("(prefers-color-scheme: dark)");
次のようになります.
const isDark = useDark();

クエリ作成用のヘルパー 菅13



ilyalesik
掲示される
例:
useMediaPredicate("(prefers-color-scheme: dark)"
オプション
  • USEDK
  • USEMedieRedicate ({ PrefsColorSchemes :"Dark "})
  • View on GitHub

    その他


    他の多くのreposはあなたの貢献を探しています:

    怠惰な / タッチ絵文字


    😀 タッチ絵文字-絵文字ピッカーMacBook Proのタッチバー



    タッチ絵文字


    Emoji picker for MacBook Pro Touch Bar.




    アプリケーションを起動すると ストリップを制御するアイコン

    をクリックする アイコンがEmojisでスイープパネルを開きます

    特定の絵文字に触れる現在開いているウィンドウに挿入します.

    インストール

  • ダウンロードlatest release ギタブから
  • アーカイブを展開する
  • 移動Touch Emoji アプリケーションフォルダに
  • トラブルシューティング


    絵文字タッチは動作しません


    アクセスするダニをチェックするか、チェックする → システム選好→ セキュリティとプライバシー→ タブプライバシー→ アクセシビリティ→ トゥケジジー

    著者


    イリアレシックhttps://github.com/ilyalesik )
    このアプリに基づいていますtouch-bar-emojis ガブリエルLorinによってhttps://github.com/gabriellorin ).

    スポンサード



    View on GitHub

    怠惰な / フローファイル


    JavaScriptファイルへの変換スクリプト


    フローファイル




    これは見つけるスクリプトです.js @フロー注釈を持つファイルは、フロー定義を抽出し、特定のフォルダに保存します.
    例として<inputDir>/example.js
    // @flow
    extract function foo(arg1: number, arg2: string): string {
        // some code here
    }

    will be transformed to <outputDir>/example.js.flow:

    // @flow
    declare extract function foo(arg1: number, arg2: string): string;

    インストール

    Install it with yarn:

    yarn add gen-flow-files
    
    NPM :
    npm i gen-flow-files --save
    

    用途


    ビルドプロセスの一部として

    scripts": {
        ...
        "flow": "flow",
        "build:flow": "gen-flow-files src --out-dir dist",
        ...
      },

    transfrom all .js files from src to .js.flow files and save them at dist.

    コマンドとして

    npx gen-flow-files <inputDir> --out-dir <outputDir&gt
    
    すべてから変換.からのjsファイル<inputDir> へ.jsフローファイルとそれらを保存.
    View on GitHub

    エフェクター / ものすごい


    楽しく愉快なリスト☄️エフェクター


    エフェクター☄️


    Effector is the reactive state manager.


    素晴らしいエフェクタービデオ、記事、パッケージのキュレーテッドリスト.
    何かクールな発見?お願いします.contribute !

    内容

  • Articles
  • Community
  • Examples
  • Packages
  • Templates
  • Videos
  • Podcasts
  • 記事

  • Effector — State Manager You Should Give a Try
  • Effector: powerful and fast 5kb state manager


  • E~WEE~CTOR(4部シリーズ)




  • Effector vs. Vuex. Which storage management is better for VueJS app?
  • コミュニティ


  • Telegram RU
  • Telegram EN

  • react-effector-realworld-example-app - 反応+エフェクターの例アプリ.
  • React Effector todo list

  • process-explorer - 階層システムプロセスビューア.
  • @howtocards/frontend
  • accesso.app
  • cardbox frontend
  • http://actorsmovies.club Frontend
  • View on GitHub

    イルヤシシク / 素晴らしい図


    楽しいFigma資源のキュレーテッドリスト


    素晴らしい図



    Figma is the first interface design tool with real-time collaboration.


    統合figmaと開発に焦点を当てた素晴らしいFigmaのもののキュレートされたリスト、例えばfigmaプラグイン、figma rest api.
    何かクールな発見?お願いします.contribute !

    内容

  • Videos
  • Articles
  • Community
  • Open-Source Plugins
  • Plugins development
  • Templates & UI Kits
  • Rest API integrations
  • Clients
  • Converters
  • ビデオ







  • 記事

  • Introducing: Figma to React

  • Our Review of Figma, the Google Docs for Designers!
  • Building A Component Library Using Figma
  • Sketch vs Figma, Adobe XD, And Other UI Design Applications
  • Component architecture in Figma

  • Design System for Figma — The
  • View on GitHub

    結論


    我々はhactoberfest偉大なイニシアチブだと思うが、それはサポートしていません.あなたは貢献者を探して素晴らしいリポジトリを知っていますか?コメントでそれらを提案する!🙌
    ハッピーコーディング!

    感謝


  • Anna Egorova - 編集
  • リンク

  • awesome-hacktoberfest-2020



  • Hacktoberfest website