How do I use ajv in Dojo?

[erotavlas]

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]

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]

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]

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

What happens with the code above?

[epoberezkin]

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

[erotavlas]

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]

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]

Please reopen if it didn't work.

[erotavlas]

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]

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

[erotavlas]

http://stackoverflow.com/q/38402021/1462656

[epoberezkin]

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]

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

[erotavlas]

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]

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