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

Walking through the source code of an OSS library(ESLint)

Walking through the source code of an OSS library(ESLint)

kkeeth

May 21, 2022
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Walking through the source
    code of an OSS library(ESLint)
    'SPOUFOE&OHJOFFS-5#FFS#BTI
    @kkeeth @kuwahara_jsri @kkeeth

    View Slide

  2. Who am I
    const my_info = {


    Name: ‘Kuwahara KEETH Kiyohito’,


    Company: ‘Yumemi Inc’,


    Position: ‘Servant Leader/Board’,


    Skills: ‘Riot.js/Next.js/Chit-chat’,


    }

    View Slide

  3. Published

    View Slide

  4. OQNKTDPNdLLFFUI

    View Slide

  5. 🙇 Sorry … 🙇


    This slide is written in English. However, I am
    still learning English, and there may be some
    inappropriate expressions.


    Plz feedback for me called “Masakari”
    about my talk!!

    View Slide

  6. Let’s start 😆

    View Slide

  7. one day in development 💁

    View Slide

  8. *NDPODFSOFEBCPVUUIFCFIBWJPS
    PGUIJTEFQFOEFOUMJCSBSZ🤔
    *TOUUIBUBIVSEMFUPCFHJOXJUI
    $BOZPVSFBMMZSFBEJU
    me
    my “inner voice”
    -FUTSFBEUIFDPEFPGUIJTMJCSBSZ
    me

    View Slide

  9. :FT CVU*EPOUVOEFSTUBOEXIBU
    UIJTMJCSBSZJTEPJOHBOE
    .BZCFZPVEPOUIBWFUIFUJNF
    *TUIBUFTTFOUJBMMZXIBUZPVXBOUUP
    TPMWF
    me
    my “inner voice”
    *UEFQFOETPOUIFUIJOH CVU
    JOUFSJNTVQQPSUDBOCFBMJBCJMJUZ
    MBUFSPO
    me

    View Slide

  10. #VUFWFOJGZPVVOEFSTUBOEUIF
    TPVSDFDPEF XIBUEPZPVEPXJUI
    JU
    my “inner voice”
    *GJUTBCVH JUTCFTUUPDSFBUFBO
    JTTVFPS13
    me
    8IFOEPZPVUIJOLUIBUXJMMCF
    SFTPMWFE %PZPVUIJOLJUXJMMCF
    EPOFPOUJNF
    my “inner voice”

    View Slide

  11. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me

    View Slide

  12. *GOPU UIFXPSTUUIBUDBOIBQQFOJT
    UIBUXFGPSLUIFSFQPTJUPSZBOE
    MPBEUIFDIBOHFT
    8IPJTHPJOHUPNBJOUBJOJU

    8IBUTUIFDPTU
    me
    my “inner voice”
    )NNN*HVFTTTP0LBZ MFUT
    KVTUBTTVNFUIBUTUIFEFTJHOJUT
    TVQQPTFEUPCF😅
    me
    none of your business ʘ(^o^)ʗ

    View Slide

  13. I feel like I could
    learn more from
    reading codes 😆

    View Slide

  14. Then, let's read the source code
    of ESLint!

    View Slide

  15. *NBHFCZIUUQTFTMJOUPSH

    View Slide

  16. Basically, we start
    from the module
    written in the main of
    package.json💁

    View Slide

  17. Next, let’s look at


    “bin” dir.

    View Slide

  18. Only 3 helper
    functions and an
    executable
    function here💁

    View Slide

  19. View Slide

  20. Next, let’s look at “lib/cli.js”
    fi
    le.

    View Slide

  21. View Slide

  22. “cli.js” depends on “ESLint” module


    “ESLint” module depends on “CLIEngine” module

    View Slide

  23. I found out later that...

    View Slide

  24. There exists a
    dependency map💁
    *NBHFCZIUUQTHJUIVCDPNFTMJOUFTMJOUCMPCNBJOEPDTTSDEFWFMPQFSHVJEFBSDIJUFDUVSFEFQFOEFODZTWH

    View Slide

  25. Knowledge 1:


    Overall design

    View Slide

  26. Unified format


    for writing each module📝

    View Slide

  27. Uni
    fi
    ed format


    for writing each
    module

    View Slide

  28. Uni
    fi
    ed format


    for writing each
    module

    View Slide

  29. util objects rich in methods📝

    View Slide

  30. w /PEFKTlVUJMzPCKFDU
    w MJCSVMFTVUJMTBTUVUJMT
    w MJCTIBSFETUSJOHVUJMT
    w MJCTIBSFETBTUVUJMT NFUIPET SFHHFYQBUUFSOT

    w MJCTPVSDFDPEFUPLFOTUPSFVUJMT
    the number of using methods

    View Slide

  31. Knowledge 2:


    Node.js’s “util”
    module is useful

    View Slide

  32. w VUJMJOTQFDU
    w VUJMGPSNBU
    w VUJMJOIFSJUT
    w VUJMMQSPNJTJGZ ˡ8IBUTVSQSJTFENFXBTUIJT

    Methods used by ESLint

    View Slide

  33. *NBHFCZIUUQTOPEFKTPSHBQJVUJMIUNM

    View Slide

  34. Knowledge 3:


    Generator functions


    in JavaScript

    View Slide

  35. Do you understand


    the following code?💁

    View Slide

  36. View Slide

  37. Let's take a look at


    some sample codes💁

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. more detail, show MDN👉

    View Slide

  42. An afterthought

    View Slide

  43. An afterthought
    w /PUXSJUUFOJOUZQFTDSJQU UZQFEF
    fi
    OJUJPOTBSFXSJUUFO

    w "OZXBZ UIFEPDVNFOUBUJPOJTFYUFOTJWF
    w +4%PDJTXFMMEPDVNFOUFE BTJTNE
    w %PDVNFOUBUJPOJTVTJOH&MFWFOUZKT UZ

    w 5PPMTGPS44(
    w %PDVNFOUBUJPOBQQJTFBTJFSUPWJFXUIBOUIFP
    ff
    i
    DJBMTJUF
    w 5IFSFBSFBMTPDPODFQUTPGMBZPVUBOEDPNQPOFOUT

    View Slide

  44. View Slide

  45. View Slide

  46. Thoughts💁

    View Slide

  47. Thoughts
    w 8FEPOUIBWFUPVOEFSTUBOEJUUPUBMZ👍
    w %FTJHOJOHGBNPVTMJCSBSJFTJTBHSFBUMFBSOJOHFYQFSJFODF👍
    w 8FDBOJNQSPWFNZTLJMMTGPSTVSF👍
    w *GZPV
    fi
    OEJUEJ
    ff
    i
    DVMU ZPVDBOSFBEJUXJUITPNFPOFFMTF👍
    w *GZPVIBWFUSPVCMF JU`THPPEUPSFBEGSPNUIFUFTUDPEF👍

    View Slide

  48. View Slide