Giter VIP home page Giter VIP logo

Comments (2)

dmtrKovalenko avatar dmtrKovalenko commented on June 8, 2024

The idea of this library is that your users are choosing the right adapter and you are using it according the public interface we have. I will think how to improve readme but the idea is simple –

  1. you are exposing date-io adapters to your users
  2. user chooses one of available and giving you this interface
  3. you are using it according to documented interface because you know that all of them producing equal results

Basically this example is for your user

import { createMyAdapter } from "your-awesome-lib/adapters/date-fns";

<DateLibProvider adapter={createMyAdapter({ locale: "fr" })}>{/* ... */}</DateLibProvider>;

And this is your usage:

import { IUtils } from "@date-io/core/IUtils";

function myFunctionInLibrary<TDate>(date: TDate, adapter: IUtils<TDate>) {
  // ...
  const weekArray = adapter.getWeekArray(Date);
  // ...
}

from date-io.

mgdodge avatar mgdodge commented on June 8, 2024

I agree that the README is confusing - not everyone uses React or tsx, so the examples are not clear.

Here is what I pieced together for a clearer example:


Create your own library:

// my-awesome-lib

// Choose which adapters library will support, and re-export them
export { default as dateFnsAdapter } from '@date-io/date-fns';
export { default as dayJsAdapter } from '@date-io/dayjs';
export { default as luxonAdapter } from '@date-io/luxon';

// Export new library code
export default class AwesomeLib {
    MyAdapter; // Will be one of the adapters above, which all have common interface

    // Adapter will be supplied by user of my-awesome-lib
    constructor(adapter) {
        this.MyAdapter = adapter;
    }

    function add5DaysAndFormat(theDate) {
        // Perform the following actions using the common adapter interface:
        //  - Create a new date instance
        //  - Manipulate the date (add 5 days)
        //  - Format the date (using one of the preset formats)
        const myDate = this.MyAdapter.date(theDate);
        const myDatePlus5 = this.MyAdapter.addDays(myDate, 5);
        const formattedResult = this.MyAdapter.format(myDatePlus5, 'fullDate');

        // Return the resulting string
        return formattedResult;
    }
}

Others use your library with whatever they choose - for example, dayjs:

// someone-using-my-awesome-lib
import dayjs from 'dayjs';

// They import your library, and the adapter that matches their own date library
import AwesomeLib, { dayJsAdapter } from 'my-awesome-lib';
const awesomeInstance = new AwesomeLib(new dayJsAdapter());

// They can use your library via the adapter they chose
const tomorrow = dayjs().add(1, 'day').toDate(); // JS Date via dayjs - eg. Sat Oct 22 2022 13:31:50 GMT-600
const tomorrowPlus5 = awesomeInstance.add5DaysAndFormat(tomorrow); // String via your lib - Oct 27, 2022

Or date-fns:

// someone-using-my-awesome-lib
import { addDays } from 'date-fns';

// They import your library, and the adapter that matches their own date library
import AwesomeLib, { dateFnsAdapter } from 'my-awesome-lib';
const awesomeInstance = new AwesomeLib(new dateFnsAdapter());

// They can use your library via the adapter they chose
const tomorrow = addDays(new Date(), 1); // JS Date via date-fns - eg. Sat Oct 22 2022 13:31:50 GMT-600
const tomorrowPlus5 = awesomeInstance.add5DaysAndFormat(tomorrow); // String via your lib - Oct 27, 2022

from date-io.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.