Ringkasan Proyek Waves

Waves adalah pustaka efek klik yang terinspirasi Google's Material Design dan didistribusikan sebagai paket npm node-waves versi 0.7.6 di bawah lisensi MIT. Halaman ini merangkum tujuan pustaka, metadata kedua berkas manifes paket, dan cara memuat aset distribusi ke sebuah halaman HTML. Susunan direktori repository dibahas di Arsitektur Repository, sedangkan daftar berkas hasil build dibahas di Artefak Distribusi.

README.md:1-4 package.json:1-8

Tujuan dan Batasan

Waves menambahkan efek ripple pada elemen HTML yang diberi kelas waves-effect. Pustaka ini tidak memiliki dependency runtime: package.json hanya memuat devDependencies berisi 11 paket perkakas build (grunt beserta grunt-contrib-* dan grunt-sass-convert), dan src/js/waves.js tidak memanggil require() maupun import sama sekali. package.json:9-24 src/js/waves.js:10-32

Berkas JavaScript dibungkus pola UMD, sehingga tersedia tiga jalur pemakaian: AMD lewat define, CommonJS lewat module.exports, dan browser global yang menetapkan window.Waves. package.json:1-8 src/js/waves.js:10-32

Nilai yang dikembalikan wrapper adalah objek Waves. Waves.displayEffect hanya alias deprecated yang meneruskan panggilan ke Waves.init sambil menulis pesan ke console.error. Daftar fungsi publik lengkapnya ada di API Publik dan Tipings TypeScript. src/js/waves.js:591-599

Field repository, bugs, dan homepage mengarah ke https://github.com/fians/Waves.git, https://github.com/fians/Waves/issues, dan http://fian.my.id/Waves. package.json:25-32

⚠️ Skrip test di package.json bernilai kosong ("test": ""), sehingga npm test tidak menjalankan pemeriksaan apa pun. Verifikasi dijalankan lewat grunt seperti dijelaskan di Pipeline Build Grunt. package.json:9-24

Dari metadata paket ke aset distribusi

graph TD
    NPM["package.json<br/>node-waves 0.7.6"]
    BOWER["bower.json<br/>Waves"]
    SRC["src/js/waves.js"]
    STYLE["src/less · src/scss · src/sass"]
    DISTJS["dist/waves.js<br/>dist/waves.min.js"]
    DISTCSS["dist/waves.css<br/>dist/waves.min.css"]
    HTML["Halaman HTML konsumen"]
    GLOBAL["window.Waves"]
    API["Waves.attach / Waves.init"]

    NPM -->|"main"| SRC
    BOWER -->|"main"| DISTJS
    BOWER -->|"main"| DISTCSS
    SRC -->|"uglify"| DISTJS
    STYLE -->|"cssmin"| DISTCSS
    DISTCSS -->|"link rel=stylesheet"| HTML
    DISTJS -->|"script src"| HTML
    HTML -->|"UMD browser global"| GLOBAL
    GLOBAL --> API

    style NPM fill:#f59e0b,color:#000
    style BOWER fill:#f59e0b,color:#000
    style DISTJS fill:#8b5cf6,color:#fff
    style DISTCSS fill:#8b5cf6,color:#fff
    style HTML fill:#2d7d46,color:#fff
    style GLOBAL fill:#2d7d46,color:#fff
    style API fill:#2d7d46,color:#fff
%% fig: Jalur dari metadata paket ke aset distribusi
%% desc: Entry point npm menunjuk sumber JavaScript, entry point bower menunjuk berkas dist, lalu kedua aset dimuat halaman konsumen dan menghasilkan window.Waves.

Fig. 1: Jalur dari metadata paket ke aset distribusiEntry point npm menunjuk sumber JavaScript, entry point bower menunjuk berkas dist, lalu kedua aset dimuat halaman konsumen dan menghasilkan window.Waves.

Aset dist tidak ditulis tangan. Gruntfile.js menyalin src/js/waves.js ke dist/waves.js dan menyalin waves.min.css serta waves.min.js ke docs/static, sehingga situs dokumentasi memakai berkas hasil build yang sama dengan yang dipakai konsumen. Gruntfile.js:72-86

Metadata paket npm dan bower

Kedua manifes menyebut proyek yang sama, tetapi memilih entry point berbeda.

Metadata	npm (`package.json`)	bower (`bower.json`)
Nama	`node-waves`	`Waves`
Versi	`0.7.6`	tidak dicantumkan
`main`	`src/js/waves.js`	`dist/waves.js`, `dist/waves.css`
Tipings	`types`: `src/typings/waves.d.ts`	tidak dicantumkan
Deskripsi	`Click effect insipired by Google Material Design`	`Click effect inspired by Google's Material Design`
Keywords	tidak dicantumkan	`click`, `material-design`
Lisensi	`MIT`	`MIT`
Homepage	`http://fian.my.id/Waves`	`http://fian.my.id/Waves`

package.json:1-8 bower.json:1-13

⚠️ main di bower menunjuk berkas non-minified (dist/waves.js, dist/waves.css), sedangkan panduan pemakaian menyarankan waves.min.css dan waves.min.js. Keduanya berisi versi 0.7.6 yang sama, tetapi hanya berkas minified yang menyertakan //# sourceMappingURL=waves.min.js.map dan berkas peta terpisah. bower.json:1-13 dist/waves.min.js:1-2

Memuat `waves.min.css` dan `waves.min.js`

Halaman Getting Started menyarankan pemuatan dua berkas: stylesheet di dalam <head> dan skrip di akhir <body>. Setelah kedua aset termuat, elemen dapat diberi kelas waves-effect. docs/_pages/getting-started.html:6-25

<!DOCTYPE html>
<html>
    <head>
        <title>Waves example</title>

        <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />

    </head>
    <body>
        <a href="#" class="button">Click Here</a>

        <script type="text/javascript" src="/path/to/waves.min.js"></script>
    </body>
</html>

Situs dokumentasi memakai pola yang sama dengan URL berversi: ./static/waves.min.css?v=0.7.6 di <head> dan ./static/waves.min.js?v=0.7.6 sebelum skrip lain. Rincian penyusunan situs itu ada di Situs Dokumentasi dengan Situs. docs/index.html:17 docs/index.html:34

Efek ripple yang muncul setelah pemuatan aset dijelaskan lebih jauh di Alur Efek Klik dari Event ke Elemen dan Siklus Hidup Ripple.

Lisensi