New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I use ajv in Dojo? #234

Closed
erotavlas opened this Issue Jul 14, 2016 · 14 comments

Comments

Projects
None yet
2 participants
@erotavlas

erotavlas commented Jul 14, 2016

I would like to use ajv in my Dojo web application, but cannot figure out how to include the ajv module and use it - when i tried to include it from the source code, it complains it could not find compile module

first I tried including this in my index.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ajv/4.1.7/ajv.min.js"></script>
but then I don't know what to do after? How to create Ajv object? I tried the same as the getting started example but it does not work.

I also tried downloading the source code and in my dojo config I included the path to ajv in my packages like this

                packages: [
                    ...
                    { name: 'ajv', location: 'third_party/ajv-4.1.0' },
not 
                ],

and then in my script I require it like this

    <script>

        require(["ajv/ajv"], function (ajv) {

        });

        schema = {
            type: "object",
            properties: {
                name: { type: "number" },
                age: { type: "number" }
            }
        };

    </script>

But it just error out.

Any ideas how to do this?

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 14, 2016

Have you tried using the bundle from cdnjs? https://github.com/epoberezkin/ajv#using-in-browser
Then the code from Getting started should work I think, although require in Dojo has some different syntax I suspect.

@erotavlas

This comment has been minimized.

erotavlas commented Jul 14, 2016

I did try that as well, but the code did not work. The new Ajv object that is created in that code example is not recognized. (seems the script tag I tried adding got interpreted as a script, not as a code snippet - sort of fixed it int he original comment)

What happens is it throws error on this line
var Ajv = require('ajv');

dojo.js:15 Uncaught Error: undefinedModule

Regardless I cannot use the cdnjs anyway because my program is required to run offline (no internet access)

In Dojo the require might be something like this

 <script data-dojo-config="async: 1"  src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ajv/4.1.7/ajv.min.js"></script>
    <script>
        //var Ajv = require('ajv');
        require(["ajv"], function (Ajv) {
            var ajv = Ajv({ allErrors: true });

            var schema = {
                "properties": {
                    "foo": { "type": "string" },
                    "bar": { "type": "number", "maximum": 3 }
                }
            };

            var validate = ajv.compile(schema);

            test({ "foo": "abc", "bar": 2 });
            test({ "foo": 2, "bar": 4 });

            function test(data) {
                var valid = validate(data);
                if (valid) console.log('Valid!');
                else console.log('Invalid: ' + ajv.errorsText(validate.errors));
            }
        });


    </script>
@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 14, 2016

You can use the bundle in dist folder it's the same.

What happens with the code above?

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 14, 2016

By the way, given that dojo doesn't recognise the bundle format (although it's universal) you may have global Ajv.

@erotavlas

This comment has been minimized.

erotavlas commented Jul 15, 2016

What do you mean by the last comment? 'global ajv'

Do you have a working example on JSFiddle?

Here is my attempt with dojo, https://jsfiddle.net/pbq2yjxy/14/
And without (just pure javascript) https://jsfiddle.net/501874ea/2/

Both fail

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 15, 2016

the problem with the fiddle is that it uses dojo that redefines require. And as I said, Ajv is global (that is until you override it in the second fiddle)

So just remove the first line in the second fiddle - it works then.

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 16, 2016

Please reopen if it didn't work.

@erotavlas

This comment has been minimized.

erotavlas commented Jul 18, 2016

The second fiddle works as you said, but when using in conjunction with Dojo, it is not possible. It just does not work. I do not know if it is even possible to make it work in a project that also uses Dojo.

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 18, 2016

Please create a non-working sample. I think fiddle uses Dojo, no?

@erotavlas

This comment has been minimized.

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 18, 2016

It seems like dojo has its own module system that isn't compatible with both commonjs and AMD, but because it redefines global require it breaks the bundle? Not sure how to fix it, maybe bundle has to be built separately...

@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 18, 2016

In which order do you load bundles (ajv and dojo)? jsfiddle loads dojo before ajv. Did you try changing the order?

@erotavlas

This comment has been minimized.

erotavlas commented Jul 18, 2016

I think you are right, I got it to work by loading the ajv bundle before I load dojo.js. My index.html looks like this.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="./third_party/dojo-release-1.10.4/dijit/themes/claro/claro.css" />

</head>
<body class="claro" oncontextmenu="return false;">

    <div id="app" style="width: 100%; height: 100%;" ></div>

    <script>
        var dojoConfig = (function () {
            return {
                async: 1,
                // Don't attempt to parse the page for widgets
                parseOnLoad: false, //It is recommended that parseOnLoad be left at false (it defaults to false, so you can simply omit this property), and that developers explicitly require dojo/parser and call parser.parse().
                tlmSiblingOfDojo: 0,
                isDebug: 1,
                baseUrl: '',
                locale: 'en',  // need to set a locale when using string bundles and a build
                packages: [
                    { name: 'dojo', location: 'third_party/dojo-release-1.10.4/dojo' },
                    { name: 'dijit', location: 'third_party/dojo-release-1.10.4/dijit' },
                    { name: 'dojox', location: 'third_party/dojo-release-1.10.4/dojox' },
                    { name: 'xstyle', location: 'third_party/xstyle-master' },
                    { name: 'dstore', location: 'third_party/dstore-1.1.1' },
                    { name: 'dmodel', location: 'third_party/dmodel-0.1.0' },
                    { name: 'json-schema', location: 'third_party/json-schema-0.2.1' }

                ],
                appConfig: {       // here is where you can set app level config by injecting on the server side
                    foo:1,
                    bar:0
                },
                // deps is an array of resource paths which should load immediately once Dojo has loaded
                // Require `app`. This loads the main application module, `app/main.js`, since we registered the `app` package above.
                deps: ['app']

            };
        })();
    </script>

   <!--Load AJV-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ajv/4.1.7/ajv.bundle.js"></script>
    <!-- load Dojo -->
    <script src="third_party/dojo-release-1.10.4/dojo/dojo.js"></script>

    <script>

            var ajv = Ajv({ allErrors: true });

            var schema = {
                "properties": {
                    "foo": { "type": "string" },
                    "bar": { "type": "number", "maximum": 3 }
                }
            };

            var validate = ajv.compile(schema);

            test({ "foo": "abc", "bar": 2 });
            test({ "foo": 2, "bar": 4 });

            function test(data) {
                var valid = validate(data);
                if (valid) console.log('Valid!');
                else console.log('Invalid: ' + ajv.errorsText(validate.errors));
            }



    </script>

</body>
</html>
@epoberezkin

This comment has been minimized.

Owner

epoberezkin commented Jul 18, 2016

Thank you! I guess it's worth adding some notes in README.

epoberezkin added a commit that referenced this issue Jul 18, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment