Code Monkey home page Code Monkey logo

Comments (3)

jspears avatar jspears commented on July 20, 2024 1

So... don't have time to create something real, but this might be a start. Obviously it needs some work to make it useful, and it uses fb-watchman instead of the other watcher chokidar

Basically it watches a styles dir, and creates an index file including all the files in that dir.

var watchman = require('fb-watchman');
var client = new watchman.Client();
var path = require('path');
var ReactNativeCss = require('react-native-css');
var css = new ReactNativeCss();
var fs = require('fs');
var rdir = path.join.bind(path, process.cwd());

var styles = rdir('src/styles');
console.log('watching', styles);
client.capabilityCheck({optional: [], required: ['relative_root']},
    function (error, resp) {
        if (error) {
            console.log(error);
            client.end();
            return;
        }

        // Initiate the watch
        client.command(['watch-project', styles],
            function (error, resp) {
                if (error) {
                    console.error('Error initiating watch:', error);
                    return;
                }

                // It is considered to be best practice to show any 'warning' or
                // 'error' information to the user, as it may suggest steps
                // for remediation
                if ('warning' in resp) {
                    console.log('warning: ', resp.warning);
                }

                // `watch-project` can consolidate the watch for your
                // dir_of_interest with another watch at a higher level in the
                // tree, so it is very important to record the `relative_path`
                // returned in resp

                console.log('watch established on ', resp.watch,
                    ' relative_path', resp.relative_path);

                var sub = {
                    // Match any `.js` file in the dir_of_interest
                    expression: ["anyof", ["match", "*.css"], ["match", "*.scss"]],
                    // Which fields we're interested in
                    fields: ["name", "size", "exists", "type"],
                };
                if (resp.relative_path) {
                    sub.relative_root = resp.relative_path;
                }
                client.command(['subscribe', resp.watch, 'style_subscription', sub],
                    function (error, resp) {
                        if (error) {
                            // Probably an error in the subscription criteria
                            console.error('failed to subscribe: ', error);
                            return;
                        }
                        console.log('subscription ' + resp.subscribe + ' established');
                    });

            });

        client.on('subscription', function (resp) {
            if (resp.subscription == 'style_subscription') {
                for (var i in resp.files) {
                    var f = resp.files[i];
                    console.log('file changed: ' + f.name, f);
                    if (/\.s?css/.test(f.name)) {
                        css.parse(path.join(styles, f.name), rdir('dist/styles', `${f.name.replace(/\.s?css$/, '')}.js`), true, false);
                    }
                }
                writeIndex();
            }
        });
    })
;
function writeIndex() {

    fs.writeFileSync(rdir('dist/styles.js'), `module.exports = ${writeObj(fs.readdirSync(rdir('./src/styles')))}`);
}
var repe = /(\.android|\.ios)?\.s?css$/;
function writeObj(files) {
    return (files.reduce(function (str, v) {
            if (repe.test(v)) {
                const req = JSON.stringify('./styles/' + v.replace(repe, ''));
                return `${str}${JSON.stringify(v.replace(repe, ''))}: require(${req}),\n`;
            }
            return v;
        }, '{\n')) + '};\n';
}

from react-native-css.

thabti avatar thabti commented on July 20, 2024

@minimaldesign Hi, currently there is no support for this. We would be happy to accept a pull request from yourself. This sounds like an awesome idea, I cannot dedicate time right now, but hopefully in the coming weeks.

from react-native-css.

thabti avatar thabti commented on July 20, 2024

@jspears Thanks, I will look at this over the weekend and try to implement it.

from react-native-css.

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.