Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 12, 2020 04:55 am GMT

svelte-monetization - A minimal and lightweight wrapper for the Web Monetization API

I've been wanting to learn Svelte and GitHub actions during this period of self-isolation and when I saw the Grant For The Web x DEV hackathon announcement, it sounded like the best time to check these items off my list.

My plan of learning Svelte and GitHub Actions is to create a plugin and publish it to NPM on every push using GitHub Actions.

What I built

I created a minimal and lightweight wrapper for the Web Monetization API in Svelte which will enable developers easily create reusable web monetized content. Thus, developers can concentrate on core application logic.

Submission Category:

Foundational Technology

Demo

Demo app soon.

Link to Code

GitHub logo sorxrob / svelte-monetization

A minimal and lightweight wrapper for the Web Monetization API

svelte-monetization

A minimal and lightweight wrapper for the Web Monetization API.

Installation

$ npm install --save svelte-monetization

Usage

Add Svelte Monetization to your project

<script&gt  import SvelteMonetization from "svelte-monetization";  function handleProgress(event) {    console.log(event.detail);  }</script&gt<SvelteMonetization on:progress={handleProgress}>  <div slot="loading">Loading message here</div>  <div slot="monetized">Monetized content here</div>  <div slot="not-monetized">Show ads here</div></SvelteMonetization>

Slots

  • loading

    This should contain your loading message or element.

  • monetized

    A place to put your monetized/premium content.

  • not-monetized

    A place to put your ads.

Events

You can also listen to Web Monetization browser events via Component events.

  • start

    Fires when Web Monetization has started actively paying.

  • progress

    Fires when a payment comes

View on GitHub

How I built it

I cloned a good template for creating Svelte components that includes Rollup and Testing using svelte-testing-library + Jest.

Inside the src/Component.svelte file, where the magic happens, I've added the code below.

<script>  import { onMount } from "svelte";  export let isLoading = true;  export let isMonetized = false;  onMount(() => {    if (!document.monetization) {    // No web monetization polyfill is installed (e.g. Coil).      isLoading = false;      isMonetized = false;      return;    }    // Check the value of document.monetization.state    // to see if a user is web monetized.    const { state } = document.monetization;    if (state === "stopped") {      // Not currently sending micropayments, nor trying to.      isLoading = false;      isMonetized = false;    }    // Determine when Web Monetization has started actively paying    document.monetization.addEventListener("monetizationstart", event => {      isLoading = false;      isMonetized = true;    });  });</script>{#if isLoading}  <slot name="loading" />{:else if isMonetized}  <slot name="monetized" />{:else}  <slot name="not-monetized" />{/if}

With the code above, we can now use this component in our Svelte projects like below.

<script>  import SvelteMonetization from "svelte-monetization";</script><SvelteMonetization>  <div slot="loading">Loading message here</div>  <div slot="monetized">Monetized content here</div>  <div slot="not-monetized">Show ads here</div></SvelteMonetization>

Easy peasy, right? How about Web Monetization browser events? Should we implement our own?

Thanks to Svelte component events, we can refactor our code to dispatch browser events from the monetization API.

<script>  import { onMount, createEventDispatcher } from "svelte";  // createEventDispatcher must be called when the component is first instantiated  const dispatch = createEventDispatcher();  export let isLoading = true;  export let isMonetized = false;  onMount(() => {    if (!document.monetization) {      isLoading = false;      isMonetized = false;      return;    }    const { state } = document.monetization;    if (state === "stopped") {      isLoading = false;      isMonetized = false;    }    // Since monetization events always start with the monetization word,    // we can just loop over the event names to make our code shorter.    const events = ["start", "progress", "pending", "stop"];    events.forEach(name => {      document.monetization.addEventListener("monetization" + name, event => {        dispatch(name, event.detail);        if (name === "start") {          isLoading = false;          isMonetized = true;        }      });    });  });</script>

How to listen to events in our SvelteMonetization component? Just add on:event-name to the component we created.

<script>  import { onMount } from "svelte";  import SvelteMonetization from "svelte-monetization";  function handleProgress(event) {    // you can use this to save micropayments    // to your own database    console.log("progress", event.detail);  }  function handleStart(event) {}  function handleStop(event) {}  function handlePending(event) {}</script><SvelteMonetization  on:progress={handleProgress}  on:start={handleStart}  on:stop={handleStop}  on:pending={handlePending}>  <div slot="loading">Loading message here</div>  <div slot="monetized">Monetized content here</div>  <div slot="not-monetized">Show ads here</div></SvelteMonetization>

Deployment

Next, we want to automatically publish a new version of our package when creating a new release on GitHub. So it's now a good time to learn and use GitHub Actions.

Here's the action:

name: Publishon:  push:    branches: [ master ]jobs:  build:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v2      - uses: actions/setup-node@v1        with:          node-version: 12          registry-url: https://registry.npmjs.org/      - run: npm ci      - run: npm publish        env:          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

This code is the GitHub Action I used, let's see what it does.

name: Publish

First we put a name to the action, this will be displayed in the checks of each push.

on:  push:    branches: [ master ]

Then we configure when we want the action to run, in this case I'm saying on each push event we want it to publish to npm.

jobs:  build:    runs-on: ubuntu-latest

Then we create our job build and configure it to run on the latest version of Ubuntu.

    steps:      - uses: actions/checkout@v2      - uses: actions/setup-node@v1        with:          node-version: 12          registry-url: https://registry.npmjs.org/      - run: npm ci      - run: npm publish        env:          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

Now we need to configure the steps of the job, this is what it does:

  • Get access to the repository files.
  • Install Node.js, with the version 12 and using the registry URL of npm, this could be changed to a custom registry or the GitHub registry.
  • Run the npm ci command to install the package dependencies.
  • Run the npm publish command, this command is also run with the environment variable NODE_AUTH_TOKEN whose value is a secret configured in the repository called NPM_AUTH_TOKEN.

Finally, we can install the component to our Svelte applications by running

npm install --save svelte-monetization

Additional Resources/Info

If you are integrating Web Monetization with a Vue 3 app, you can check my dev post for some inspiration.

wobsoriano image

Web Monetization in Vue

Robert Soriano May 10 2 min read

#gftwhackathon #vue #webmonetization

Up next

In the next post, I will create a sample application that uses our svelte-monetization component.


Original Link: https://dev.to/wobsoriano/svelte-monetization-a-minimal-and-lightweight-wrapper-for-the-web-monetization-api-1kld

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To